Ext JS框架中日期函數(shù)的用法及日期選擇控件的實(shí)現(xiàn)
來(lái)源:易賢網(wǎng) 閱讀:2167 次 日期:2016-06-25 13:43:54
溫馨提示:易賢網(wǎng)小編為您整理了“Ext JS框架中日期函數(shù)的用法及日期選擇控件的實(shí)現(xiàn)”,方便廣大網(wǎng)友查閱!

Ext.Date是一個(gè)單例,封裝了一系列日期操作函數(shù),擴(kuò)展JavaScript Date的功能,下面列出一些常用的功能。

基本函數(shù):

Ext.Date.add(date, interval, value) 給date增加或減少時(shí)間,這個(gè)函數(shù)不改變?cè)蠨ate對(duì)象的值,而是返回一個(gè)新的Date對(duì)象。

Ext.Date.between(date, start, end) 判斷date是否在start和end之間。

Ext.Date.clearTime(date, clone) 把date的時(shí)間設(shè)置成00小時(shí)00分00秒000毫秒。

Ext.Date.clone(date) 克隆date的一個(gè)副本。

Ext.Date.format(date, format)把日期格式化,返回格式化后的字符串。

Ext.Date.getDayOfYear(date)獲取date是年中的第幾天。

Ext.Date.getDaysInMonth(date)獲取date是月中的第幾天。

Ext.Date.getFirstDateOfMonth(date)獲取date所在月份的第一天。

Ext.Date.getFirstDayOfMonth(date)獲取date所在月份第一天的星期。

Ext.Date.getLastDateOfMonth(date)獲取date所在月份的最后一天。

Ext.Date.getLastDayOfMonth(date)獲取date所在月份最后一天的星期。

Ext.Date.getWeekOfYear(date) 獲取date所在年中的第幾個(gè)星期。

Ext.Date.isLeapYear(date)date所在年份是否閏年。

Ext.Date.now() 返回當(dāng)前時(shí)間到1970年1月1日的毫秒數(shù)。在chrome、ie9和ie10中已經(jīng)有Date.now()實(shí)現(xiàn)相同的功能。

Ext.Date.parse(input, format, strict)根據(jù)輸入的字符串創(chuàng)建日期,Date.parse()有類(lèi)似的功能。

下面零碎地舉幾個(gè)例子綜合來(lái)看一下:

// Ext.Date.add(date, interval, value) 給date增加或減少時(shí)間,這個(gè)函數(shù)不改變?cè)蠨ate對(duì)象的值,而是返回一個(gè)新的Date對(duì)象。 

// @param  {Date}  date   原日期對(duì)象。 

// @param  {String} interval value的單位,可以選Ext.Date.DAY、Ext.Date.HOUR、Ext.Date.MINUTE、Ext.Date.MONTH、 

//               Ext.Date.SECOND、Ext.Date.YEAR、Ext.Date.MILLI。 

// @param  {number} value   日期對(duì)象需要增加的值。 

// @return {Date}       返回增加值后的Date對(duì)象。 

// Example 

var date = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, 5); //增加5天 

console.log(date); //返回結(jié)果 Fri Nov 03 2006 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 

var date = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, -5); //減少5天,如果值是負(fù)數(shù),則減少。 

console.log(date); //返回結(jié)果 Tue Oct 24 2006 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 

var date = Ext.Date.add(new Date('10/29/2006'), Ext.Date.YEAR, 2); //增加2年 

console.log(date); //返回結(jié)果 Wed Oct 29 2008 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 

// Ext.Date.between(date, start, end) 判斷date是否在start和end之間。 

// @param  {Date}   date  要判斷的日期。 

// @param  {Date}   start  

// @param  {Date}   end 

// @return {Boolean}     如果date在start和end之間返回true,否則返回false。 

// Example 

var date = new Date('10/29/2006'); 

var start = new Date('10/5/2006'); 

var end = new Date('11/15/2006'); 

Ext.Date.between(date, start, end); //返回true 

// Ext.Date.clearTime(date, clone) 把date的時(shí)間設(shè)置成00小時(shí)00分00秒000毫秒。 

// @param  {Date}   date  

// @param  {Bollean} clone 可選參數(shù)。如果為true則返回date的一個(gè)副本,如果為false則返回date本身,默認(rèn)為false。 

// @return {Date}      返回設(shè)置后的日期。 

// Example 

var date = new Date('10/30/2012 14:30:00'); 

Ext.Date.clearTime(date); //返回 Tue Oct 30 2012 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 

// Ext.Date.clone(date) 克隆date的一個(gè)副本。 

// @param  {Date} date 

// @return {Date} 返回克隆后的Date。 

// Example 

var orig = new Date('10/30/2012'); 

var copy = Ext.Date.clone(orig); //克隆一個(gè)值 

// Ext.Date.format(date, format) 把日期格式化,返回格式化后的字符串。 

// @param  {Date}  date  日期。 

// @param  {String} format 日期格式,Y-年,m-月,d-日,H-24小時(shí),i-分鐘,s-秒 

// @return {String}     返回格式化后的字符串。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.format(date, 'Y-m-d H:i:s');    // 2012-10-20 14:30:00 

Ext.Date.format(date, 'Y年m月d日 H:i:s');  // 2012年10月20日 14:30:00 

// Ext.Date.getDayOfYear(date) 獲取date是年中的第幾天 

// @param  {Date}  date 日期。 

// @return {Number}    返回天數(shù),取值范圍0~364,如果是閏年則有365。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.getDayOfYear(date); //返回 293 

// Ext.Date.getDaysInMonth(date) 獲取date是月中的第幾天 

// @param  {Date}  date 日期。 

// @return {Number}    返回天數(shù)。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.getDayOfYear(date); //返回 31 

// Ext.Date.getFirstDateOfMonth(date) 獲取date所在月份的第一天 

// @param  {Date} date 日期。 

// @return {Date}    返回所在月份的第一天。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.getFirstDateOfMonth(date); //返回 Mon Oct 01 2012 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 

// Ext.Date.getFirstDayOfMonth(date) 獲取date所在月份第一天的星期 

// @param  {Date}  date 日期。 

// @return {Number}    返回所在月份第一天的星期,取值范圍0~6。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.getFirstDayOfMonth(date); //返回 1,表示星期一 

// Ext.Date.getLastDateOfMonth(date) 獲取date所在月份的最后一天 

// @param  {Date} date 日期。 

// @return {Date}    返回所在月份的最后一天。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.getLastDateOfMonth(date); //返回 Wed Oct 31 2012 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 

// Ext.Date.getLastDayOfMonth(date) 獲取date所在月份最后一天的星期 

// @param  {Date}  date 日期。 

// @return {Number}    返回所在月份最后一天的星期,取值范圍0~6。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.getLastDayOfMonth(date); //返回 3,表示星期三 

// Ext.Date.getWeekOfYear(date) 獲取date所在年中的第幾個(gè)星期 

// @param  {Date}  date 日期。 

// @return {Number}    返回所在年中的第幾個(gè)星期,取值范圍1~53。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.getWeekOfYear(date); //返回 42 

// Ext.Date.isLeapYear(date) date所在年份是否閏年 

// @param  {Date}   date 日期。 

// @return {Boolean}    true表示閏年,false表示平年。 

// Example 

var date = new Date('10/20/2012 14:30:00'); 

Ext.Date.isLeapYear(date); //返回 true 

// Ext.Date.now()   返回當(dāng)前時(shí)間到1970年1月1日的毫秒數(shù)。 

//          在chrome、ie9和ie10中已經(jīng)有Date.now()實(shí)現(xiàn)相同的功能。 

// @return {Number} 返回毫秒數(shù)。 

// Example 

var timestamp = Ext.Date.now(); //1351666679575 

var date = new Date(timestamp); //Wed Oct 31 2012 14:57:59 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 

// Ext.Date.parse(input, format, strict) 根據(jù)輸入的字符串創(chuàng)建日期,Date.parse()有類(lèi)似的功能。 

// @param {String}  input  日期字符串。 

// @param {String}  format 日期格式。 

// @param {Boolean} strict 驗(yàn)證input字符串的有效性,默認(rèn)是false。 

// @param {Date}       返回創(chuàng)建的日期。 

// Example 

var input = '2012年10月31日 14:30:00'; 

var format = 'Y年m月d日 H:i:s'; 

var date = Ext.Date.parse(input, format, true); //Wed Oct 31 2012 14:30:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

實(shí)例:實(shí)現(xiàn)帶week(星期)的日期選擇控件

1.問(wèn)題:

是否使用了Ext JS 就可以完美的解決 星期的問(wèn)題呢?

在本系列的第一篇就有說(shuō)到, Ext 的datepicker 并不能看到星期, 需要自己去擴(kuò)展。

但是, 擴(kuò)展的時(shí)候就有一個(gè)問(wèn)題了:

Javascript 語(yǔ)言的Date對(duì)象每周是從星期天開(kāi)始。

而Ext JS的getWeekOfYear這個(gè)方法卻又是遵循 ISO-8601, 每周是從星期一開(kāi)始的。(其他的方法又有不是遵循此標(biāo)準(zhǔn)的, Ext JS混合了不同的日期時(shí)間表示標(biāo)準(zhǔn))。

Ext.Date.getWeekOfYear 這個(gè)方法的返回值是 1- 53 之間的數(shù)。

這樣的話(huà), 就會(huì)出現(xiàn)一些問(wèn)題:

Ext js 的日期顯示控件的顯示是從星期天開(kāi)始: (S M T W T F S (星期天 星期一 星期二  .. 星期六))

但是, 通過(guò)選中的時(shí)間獲取星期時(shí)卻又是從星期天開(kāi)始。導(dǎo)致:

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

date = new Date("2013/08/18");

var week = Ext.Date.getWeekOfYear(date);

alert("week="+week);

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

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

2.解決方案:

結(jié)合js 的Date 對(duì)象和 Ext js的Ext.Date, 實(shí)現(xiàn)獲取星期字串。

每周以星期天為第一天

每年的周數(shù)從(1-52), 如果超過(guò)52 周,算到下一年的第一周。 比如2013/12/29 為 2013年的53周, 算到 2014年的第一周

返回 “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;

}

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類(lèi)型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專(zhuān)用圖標(biāo)
聯(lián)系電話(huà):0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
咨詢(xún)QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)