Ext JS 4實現(xiàn)帶week(星期)的日期選擇控件(實戰(zhàn)二)
更新時間:2013年08月21日 15:24:14 作者:
Javascript 有提供Date 對象用于處理時間。但是Date 并沒有提供獲取星期的方法,jquery 的擴展組件 等有直接提供這樣的一些現(xiàn)成包,感興趣的朋友可以了解下
前言
JavaScript 中的日期和時間
Ext JS 4實現(xiàn)帶week(星期)的日期選擇控件(實戰(zhàn)一)
如對本篇的一些預備知識需詳盡了解,可參考以上兩篇。
Javascript 有提供Date 對象用于處理時間。但是Date 并沒有提供獲取星期的方法。
要在web 端通過js 方式獲取某個時間是這一年的第幾個星期,可以根據(jù)一些算法去實現(xiàn)。 當然, jquery 的擴展組件 等有直接提供這樣的一些現(xiàn)成包。
像Ext js 就有提供獲取星期的方法 Ext.Date.getWeekOfYear(date).
問題
是否使用了Ext JS 就可以完美的解決 星期的問題呢?
在本系列的第一篇就有說到, Ext 的datepicker 并不能看到星期, 需要自己去擴展。
但是, 擴展的時候就有一個問題了:
Javascript 語言的Date對象每周是從星期天開始。
而Ext JS的getWeekOfYear這個方法卻又是遵循 ISO-8601, 每周是從星期一開始的。(其他的方法又有不是遵循此標準的, Ext JS混合了不同的日期時間表示標準)。
Ext.Date.getWeekOfYear 這個方法的返回值是 1- 53 之間的數(shù)。
這樣的話, 就會出現(xiàn)一些問題:
Ext js 的日期顯示控件的顯示是從星期天開始: (S M T W T F S (星期天 星期一 星期二 .. 星期六))
但是, 通過選中的時間獲取星期時卻又是從星期天開始。導致:
1. 每個星期天的星期會小1 (比如2013/08/18 , 星期天, 應該是34周,但是通過這個方法卻是算成上一周的結(jié)尾 , 33 周)
date = new Date("2013/08/18");
var week = Ext.Date.getWeekOfYear(date);
alert("week="+week);
2. Ext Js 日期控件默認顯示了 42天, 這樣的話,在兩個年交互的地方就會出現(xiàn)問題
是當年顯示 53 周呢? 還是下一年的第一周。
解決方案
結(jié)合js 的Date 對象和 Ext js的Ext.Date, 實現(xiàn)獲取星期字串。
1. 每周以星期天為第一天
2. 每年的周數(shù)從(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實現(xiàn)帶week(星期)的日期選擇控件(實戰(zhàn)一)
如對本篇的一些預備知識需詳盡了解,可參考以上兩篇。
Javascript 有提供Date 對象用于處理時間。但是Date 并沒有提供獲取星期的方法。
要在web 端通過js 方式獲取某個時間是這一年的第幾個星期,可以根據(jù)一些算法去實現(xiàn)。 當然, jquery 的擴展組件 等有直接提供這樣的一些現(xiàn)成包。
像Ext js 就有提供獲取星期的方法 Ext.Date.getWeekOfYear(date).
問題
是否使用了Ext JS 就可以完美的解決 星期的問題呢?
在本系列的第一篇就有說到, Ext 的datepicker 并不能看到星期, 需要自己去擴展。
但是, 擴展的時候就有一個問題了:
Javascript 語言的Date對象每周是從星期天開始。
而Ext JS的getWeekOfYear這個方法卻又是遵循 ISO-8601, 每周是從星期一開始的。(其他的方法又有不是遵循此標準的, Ext JS混合了不同的日期時間表示標準)。
Ext.Date.getWeekOfYear 這個方法的返回值是 1- 53 之間的數(shù)。
這樣的話, 就會出現(xiàn)一些問題:
Ext js 的日期顯示控件的顯示是從星期天開始: (S M T W T F S (星期天 星期一 星期二 .. 星期六))
但是, 通過選中的時間獲取星期時卻又是從星期天開始。導致:
1. 每個星期天的星期會小1 (比如2013/08/18 , 星期天, 應該是34周,但是通過這個方法卻是算成上一周的結(jié)尾 , 33 周)
復制代碼 代碼如下:
date = new Date("2013/08/18");
var week = Ext.Date.getWeekOfYear(date);
alert("week="+week);
2. Ext Js 日期控件默認顯示了 42天, 這樣的話,在兩個年交互的地方就會出現(xiàn)問題
是當年顯示 53 周呢? 還是下一年的第一周。
解決方案
結(jié)合js 的Date 對象和 Ext js的Ext.Date, 實現(xiàn)獲取星期字串。
1. 每周以星期天為第一天
2. 每年的周數(shù)從(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;
}
相關(guān)文章
ExtJS PropertyGrid中使用Combobox選擇值問題
在PropertyGrid中使用Combobox來選擇值時,得到的應該是displayField的值,但是在確認選擇的時候卻顯示了valueField的值2010-06-06ExtJS GridPanel 根據(jù)條件改變字體顏色
ExtJS下GridPanel 根據(jù)條件改變字體顏色的實現(xiàn)代碼。2010-03-03