Ext JS 4实现带week(星期)的日期选择控件(实战二)
更新时间：2013年08月21日 15:24:14 作者：
Javascript 有提供Date 对象用于处理时间。但是Date 并没有提供获取星期的方法，jquery 的扩展组件 等有直接提供这样的一些现成包，感兴趣的朋友可以了解下
前言
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 中的日期和时间
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;
}
相关文章
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
类似Ext.Msg.alert();但没有关闭按钮,由于Extjs4消息框中的关闭按钮，没有执行回调函数，点击关闭按钮后，直接关闭窗口，接下来为大家详细介绍下去掉关闭按钮2013-04-04
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Javascript 有提供Date 对象用于处理时间。但是Date 并没有提供获取星期的方法，jquery 的扩展组件 等有直接提供这样的一些现成包，感兴趣的朋友可以了解下2013-08-08
Extjs中RowExpander控件的默认展开问题示例探讨
本文为大家探讨下关于Extjs中RowExpander控件的默认展开问题，下面有个不错的示例，感兴趣的朋友可以参考下2014-01-01
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
在用extjs做参数设置的时候，想在文本框后加入说明子，在网站上走了一大圈还是没能找到合适的，小花用了一个下午的上班时间终于将这个页面与我想要的功能做出，页面很好看与自然，希望网友在用extjs做项目的时候用的着.2009-11-11
当需要为ComboBox加载数据后进行赋初始选中项的话，如果是写在store.load()之后2012-03-03
对于想了解extjs 的朋友有个帮助2008-12-12
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
需要做一个控制grid列显示的checkboxgroup，虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,需要的朋友可以参考下2014-05-05
根据我在论坛上的观察，xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype，或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。2010-01-01
在Ext的使用过程中，一不留心就出现了乱码，包括在客户端提交给服务器的数据中出现了乱码和服务器端返回给客户端的数据中出现了乱码，下面简单分析一下出现乱码的原因。2009-04-04
后台程序往往可能要执行一段时间才能得到返回结果，加入进度条可以提高客户体验度，在本文为大家介绍两种便捷的实现方式，感兴趣的朋友可以了解下2013-09-09
最新评论