Ext JS框架中日期函數(shù)的用法及日期選擇控件的實(shí)現(xiàn)
Ext.Date是一個(gè)單例,封裝了一系列日期操作函數(shù),擴(kuò)展JavaScript Date的功能,下面列出一些常用的功能。
基本函數(shù):
- Ext.Date.add(date, interval, value) 給date增加或減少時(shí)間,這個(gè)函數(shù)不改變原有Date對象的值,而是返回一個(gè)新的Date對象。
- 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()有類似的功能。
下面零碎地舉幾個(gè)例子綜合來看一下:
// Ext.Date.add(date, interval, value) 給date增加或減少時(shí)間,這個(gè)函數(shù)不改變原有Date對象的值,而是返回一個(gè)新的Date對象。 // @param {Date} date 原日期對象。 // @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 日期對象需要增加的值。 // @return {Date} 返回增加值后的Date對象。 // 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 (中國標(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 (中國標(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 (中國標(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 (中國標(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 (中國標(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 (中國標(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 (中國標(biāo)準(zhǔn)時(shí)間) // Ext.Date.parse(input, format, strict) 根據(jù)輸入的字符串創(chuàng)建日期,Date.parse()有類似的功能。 // @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 (中國標(biāo)準(zhǔn)時(shí)間)
實(shí)例:實(shí)現(xiàn)帶week(星期)的日期選擇控件
1.問題:
是否使用了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ù)。
這樣的話, 就會出現(xiàn)一些問題:
Ext js 的日期顯示控件的顯示是從星期天開始: (S M T W T F S (星期天 星期一 星期二 .. 星期六))
但是, 通過選中的時(shí)間獲取星期時(shí)卻又是從星期天開始。導(dǎo)致:
每個(gè)星期天的星期會小1 (比如2013/08/18 , 星期天, 應(yīng)該是34周,但是通過這個(gè)方法卻是算成上一周的結(jié)尾 , 33 周)
date = new Date("2013/08/18");
var week = Ext.Date.getWeekOfYear(date);
alert("week="+week);
Ext Js 日期控件默認(rèn)顯示了 42天, 這樣的話,在兩個(gè)年交互的地方就會出現(xiàn)問題
是當(dāng)年顯示 53 周呢? 還是下一年的第一周。
2.解決方案:
結(jié)合js 的Date 對象和 Ext js的Ext.Date, 實(shí)現(xiàn)獲取星期字串。
每周以星期天為第一天
每年的周數(shù)從(1-52), 如果超過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; }
- 基于vuejs+webpack的日期選擇插件
- js實(shí)現(xiàn)精確到秒的日期選擇器完整實(shí)例
- js實(shí)現(xiàn)點(diǎn)擊文本框顯示日期選擇器特效代碼分享
- Ext JS 4實(shí)現(xiàn)帶week(星期)的日期選擇控件(實(shí)戰(zhàn)二)
- Ext JS 4實(shí)現(xiàn)帶week(星期)的日期選擇控件(實(shí)戰(zhàn)一)
- Js日期選擇自動填充到輸入框(界面漂亮兼容火狐)
- Js日期選擇器并自動加入到輸入框中示例代碼
- input 日期選擇功能的javascript代碼
- javascript 表單日期選擇效果
- 原生js實(shí)現(xiàn)日期選擇插件
相關(guān)文章
ExtJs默認(rèn)的字體大小改變的幾種方法(自己整理)
本文列出網(wǎng)上收集的幾種方法,希望對大家有用,并且做了下瀏覽器兼容,感興趣的朋友可以參考下哈2013-04-04EXTJS內(nèi)使用ACTIVEX控件引起崩潰問題的解決方法
在本人目前的項(xiàng)目中,前端部分完全使用EXTJS基于“One-Page”理念搭建。2010-03-03extjs中g(shù)rid中嵌入動態(tài)combobox的應(yīng)用
今天需要在grid中嵌入combobox,在網(wǎng)上找了好久也沒有找到一個(gè)正確可行的方法,可能是版本問題(我版本是extjs 3.0),沒有繼續(xù)研究其原因,自己查找資料,終于實(shí)現(xiàn)功能?,F(xiàn)在分享一下代碼。2011-01-01Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹效果(自寫)
最近涉及到的一個(gè)項(xiàng)目中,需要實(shí)現(xiàn)ComboBoxTree的效果,由于在Extjs中是沒有這種效果,所以看看別人的資料自己寫了一個(gè),感興趣的朋友可以參考下哈2013-05-05解決Extjs 4 Panel作為Window組件的子組件時(shí)出現(xiàn)雙重邊框問題
Extjs的Panel和Window等組件在默認(rèn)情況下是帶邊框的,通常情況下,單獨(dú)使用沒有什么關(guān)系,但是將Panel作為Window組件的子組件時(shí)就會出現(xiàn)雙重邊框的現(xiàn)象于是想辦法將兩重邊框去掉,變成單邊框,感興趣的朋友可以了解下2013-01-01Ext JS 4實(shí)現(xiàn)帶week(星期)的日期選擇控件(實(shí)戰(zhàn)二)
Javascript 有提供Date 對象用于處理時(shí)間。但是Date 并沒有提供獲取星期的方法,jquery 的擴(kuò)展組件 等有直接提供這樣的一些現(xiàn)成包,感興趣的朋友可以了解下2013-08-08Ajax請求在數(shù)據(jù)量大的時(shí)候出現(xiàn)超時(shí)的解決方法
這篇文章主要介紹了Ajax請求在數(shù)據(jù)量大的時(shí)候出現(xiàn)超時(shí)的解決方法,需要的朋友可以參考下2014-02-02