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变强势
Jun 22 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
js宝典学习笔记(上)
2007/01/10 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
vue实现路由切换改变title功能
2019/05/28 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python处理文本换行符实例代码
2018/02/03 Python
python之super的使用小结
2018/08/13 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
中国文明网签名寄语
2014/01/18 职场文书
大学生社会实践评语
2014/04/25 职场文书
保证书范文大全
2014/04/28 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python