Ext JS 4实现带week(星期)的日期选择控件(实战二)


Posted in Javascript onAugust 21, 2013

前言

JavaScript 中的日期和时间
Ext JS 4实现带week(星期)的日期选择控件(实战一)

如对本篇的一些预备知识需详尽了解,可参考以上两篇。
Javascript 有提供Date 对象用于处理时间。但是Date 并没有提供获取星期的方法。
要在web 端通过js 方式获取某个时间是这一年的第几个星期,可以根据一些算法去实现。 当然, jquery 的扩展组件 等有直接提供这样的一些现成包。
像Ext js 就有提供获取星期的方法 Ext.Date.getWeekOfYear(date).

问题

是否使用了Ext JS 就可以完美的解决 星期的问题呢?
在本系列的第一篇就有说到, Ext 的datepicker 并不能看到星期, 需要自己去扩展。
但是, 扩展的时候就有一个问题了:
Javascript 语言的Date对象每周是从星期天开始。
而Ext JS的getWeekOfYear这个方法却又是遵循 ISO-8601, 每周是从星期一开始的。(其他的方法又有不是遵循此标准的, Ext JS混合了不同的日期时间表示标准)。
Ext.Date.getWeekOfYear 这个方法的返回值是 1- 53 之间的数。
这样的话, 就会出现一些问题:
Ext js 的日期显示控件的显示是从星期天开始: (S M T W T F S (星期天 星期一 星期二 .. 星期六))
但是, 通过选中的时间获取星期时却又是从星期天开始。导致:

1. 每个星期天的星期会小1 (比如2013/08/18 , 星期天, 应该是34周,但是通过这个方法却是算成上一周的结尾 , 33 周)

date = new Date("2013/08/18"); 
var week = Ext.Date.getWeekOfYear(date); 
alert("week="+week);

2. Ext Js 日期控件默认显示了 42天, 这样的话,在两个年交互的地方就会出现问题

是当年显示 53 周呢? 还是下一年的第一周。

解决方案

结合js 的Date 对象和 Ext js的Ext.Date, 实现获取星期字串。
1. 每周以星期天为第一天
2. 每年的周数从(1-52), 如果超过52 周,算到下一年的第一周。 比如2013/12/29 为 2013年的53周, 算到 2014年的第一周
3. 返回 “W1334” 这样的周的格式

/* 
* return as W1334()2013/08/20 
* 1. if sunday==> week = week+1 
* getWeekOfYear(Ext use ISO-8601,week begin monday) 
* js Date(week begin sunday) 
* 2. if week > 52==> year = year +1; week = week - 52; 
* 3. if month ==11(12 month) and week <2 ==> year = year +1; 
*/ 
function getWeekStrOfDate(date) 
{ 
var weekStr = null; 
if(date!=null) 
{ 
weekStr = "W"; 
var dateYear = date.getFullYear(); 
var dateWeek = Ext.Date.getWeekOfYear(date); 
var firstDayOfMonth = Ext.Date.getFirstDayOfMonth(date); 
var day = date.getDate(); 
var month = date.getMonth(); 
//weekday 0-6 
var weekday = date.getDay(); 
if(weekday===0) 
{ 
dateWeek++; 
} // week>52 ==> year +1 
if(month==11) 
{ 
if(dateWeek>52) 
{ 
dateYear += 1; 
dateWeek -= 52; 
}else if(dateWeek<2){ 
dateYear += 1; 
} 
} 
var yearStr = dateYear.toString(); 
yearStr = yearStr.substring(2,4); 
var dateWeekStr = dateWeek.toString(); 
if(dateWeekStr.length<2) 
{ 
dateWeekStr = "0" + dateWeekStr; 
} 
weekStr += yearStr; 
weekStr += dateWeekStr; 
} 
return weekStr; 
}
Javascript 相关文章推荐
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
浅谈js中对象的使用
Aug 11 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
js实现筛选功能
Nov 24 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 #Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 #Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 #Javascript
jquery设置控件位置的方法
Aug 21 #Javascript
获取表单控件原始(初始)值的方法
Aug 21 #Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 #Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 #Javascript
You might like
php采用session实现防止页面重复刷新
2015/12/24 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
Node 代理访问的实现
2019/09/19 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python实现无证书加密解密实例
2014/10/27 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
2015年保管员工作总结
2015/04/30 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书