Ext JS 4實現帶week(星期)的日期選擇控件(實戰二)

2019-11-20 22:22:44

字體：大中小

來源：轉載

供稿：網友

前言

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