快捷導(dǎo)航

Ext JS 4實(shí)現(xiàn)帶week(星期)的日期選擇控件(實(shí)戰(zhàn)二)

更新時(shí)間：2013年08月21日 15:24:14 作者：

Javascript 有提供Date 對象用于處理時(shí)間。但是Date 并沒有提供獲取星期的方法，jquery 的擴(kuò)展組件等有直接提供這樣的一些現(xiàn)成包，感興趣的朋友可以了解下

前言

JavaScript 中的日期和時(shí)間
Ext JS 4實(shí)現(xiàn)帶week(星期)的日期選擇控件(實(shí)戰(zhàn)一)

如對本篇的一些預(yù)備知識需詳盡了解，可參考以上兩篇。
Javascript 有提供Date 對象用于處理時(shí)間。但是Date 并沒有提供獲取星期的方法。
要在web 端通過js 方式獲取某個(gè)時(shí)間是這一年的第幾個(gè)星期，可以根據(jù)一些算法去實(shí)現(xiàn)。當(dāng)然， jquery 的擴(kuò)展組件等有直接提供這樣的一些現(xiàn)成包。
像Ext js 就有提供獲取星期的方法 Ext.Date.getWeekOfYear(date).

問題

是否使用了Ext JS 就可以完美的解決星期的問題呢？
在本系列的第一篇就有說到， Ext 的datepicker 并不能看到星期，需要自己去擴(kuò)展。
但是，擴(kuò)展的時(shí)候就有一個(gè)問題了：
Javascript 語言的Date對象每周是從星期天開始。
而Ext JS的getWeekOfYear這個(gè)方法卻又是遵循 ISO-8601, 每周是從星期一開始的。（其他的方法又有不是遵循此標(biāo)準(zhǔn)的， Ext JS混合了不同的日期時(shí)間表示標(biāo)準(zhǔn)）。
Ext.Date.getWeekOfYear 這個(gè)方法的返回值是 1- 53 之間的數(shù)。
這樣的話，就會(huì)出現(xiàn)一些問題：
Ext js 的日期顯示控件的顯示是從星期天開始：（S M T W T F S (星期天星期一星期二 .. 星期六)）
但是，通過選中的時(shí)間獲取星期時(shí)卻又是從星期天開始。導(dǎo)致：

1. 每個(gè)星期天的星期會(huì)小1 (比如2013/08/18 , 星期天，應(yīng)該是34周，但是通過這個(gè)方法卻是算成上一周的結(jié)尾， 33 周)

復(fù)制代碼代碼如下:

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

2. Ext Js 日期控件默認(rèn)顯示了 42天，這樣的話，在兩個(gè)年交互的地方就會(huì)出現(xiàn)問題

是當(dāng)年顯示 53 周呢？還是下一年的第一周。

解決方案

結(jié)合js 的Date 對象和 Ext js的Ext.Date, 實(shí)現(xiàn)獲取星期字串。
1. 每周以星期天為第一天
2. 每年的周數(shù)從(1-52), 如果超過52 周，算到下一年的第一周。比如2013/12/29 為 2013年的53周，算到 2014年的第一周
3. 返回 “W1334” 這樣的周的格式

復(fù)制代碼代碼如下:

 
/* 
* 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; 
} 