[Ext JS 4] 实战之 带week(星期)的日期选择控件(二)
来源:互联网 发布:淘宝网妈妈婚宴装 编辑:程序博客网 时间:2024/06/05 07:03
前言
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-6var weekday = date.getDay();if(weekday===0){dateWeek++;}// week>52 ==> year +1if(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;}
====> 不过此方案会有一些问题, 请转到
[Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(二)
- [Ext JS 4] 实战之 带week(星期)的日期选择控件
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
- 带时间选择的JS日期控件
- 带时间选择的JS日期控件
- 带时间选择得JS日期控件
- 带时间的日期选择web控件
- 带时间的日期选择web控件
- JS弹出日期控件升级版(带时间选择)
- js日期选择控件
- EXT日期时间选择控件,目前最好用的版本
- Ext的日历选择控件星期几全部变为"y"了
- 一个基于JS的日期选择控件
- 一个非常好的JS日期选择控件
- 超简洁的js 日期选择控件
- [Ext JS 4] 实战之浏览器兼容
- [Ext JS 4] 实战之多选下拉单 (带checkbox)
- [Ext JS 4] 实战之多选下拉单 (带checkbox)
- profile bashrc bash_profile 之间的区别和联系
- 解决拖延症
- UIWebView体系结构(六)UIWebView
- 【C大事】第六讲:定时器控件
- 最短路径之Dijkstra
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(二)
- 层次查询
- hdu2243之AC自动机+矩阵乘法
- 关于 extern inline
- hdu 2446(数论)
- UIWebView体系结构(七)WebView
- 山东省第四届ACM-H Boring Counting
- Java 内存泄露
- 手游开发知识(二)--怎样加快NDK的开发