Ext JS框架中日期函数的用法及日期选择控件的实现
Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScriptDate的功能,下面列出一些常用的功能。
基本函数:
- Ext.Date.add(date,interval,value)给date增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象。
- Ext.Date.between(date,start,end)判断date是否在start和end之间。
- Ext.Date.clearTime(date,clone)把date的时间设置成00小时00分00秒000毫秒。
- Ext.Date.clone(date)克隆date的一个副本。
- 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所在年中的第几个星期。
- Ext.Date.isLeapYear(date)date所在年份是否闰年。
- Ext.Date.now()返回当前时间到1970年1月1日的毫秒数。在chrome、ie9和ie10中已经有Date.now()实现相同的功能。
- Ext.Date.parse(input,format,strict)根据输入的字符串创建日期,Date.parse()有类似的功能。
下面零碎地举几个例子综合来看一下:
//Ext.Date.add(date,interval,value)给date增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象。 //@param{Date}date原日期对象。 //@param{String}intervalvalue的单位,可以选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 vardate=Ext.Date.add(newDate('10/29/2006'),Ext.Date.DAY,5);//增加5天 console.log(date);//返回结果FriNov03200600:00:00GMT+0800(中国标准时间) vardate=Ext.Date.add(newDate('10/29/2006'),Ext.Date.DAY,-5);//减少5天,如果值是负数,则减少。 console.log(date);//返回结果TueOct24200600:00:00GMT+0800(中国标准时间) vardate=Ext.Date.add(newDate('10/29/2006'),Ext.Date.YEAR,2);//增加2年 console.log(date);//返回结果WedOct29200800:00:00GMT+0800(中国标准时间) //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 vardate=newDate('10/29/2006'); varstart=newDate('10/5/2006'); varend=newDate('11/15/2006'); Ext.Date.between(date,start,end);//返回true //Ext.Date.clearTime(date,clone)把date的时间设置成00小时00分00秒000毫秒。 //@param{Date}date //@param{Bollean}clone可选参数。如果为true则返回date的一个副本,如果为false则返回date本身,默认为false。 //@return{Date}返回设置后的日期。 //Example vardate=newDate('10/30/201214:30:00'); Ext.Date.clearTime(date);//返回TueOct30201200:00:00GMT+0800(中国标准时间) //Ext.Date.clone(date)克隆date的一个副本。 //@param{Date}date //@return{Date}返回克隆后的Date。 //Example varorig=newDate('10/30/2012'); varcopy=Ext.Date.clone(orig);//克隆一个值 //Ext.Date.format(date,format)把日期格式化,返回格式化后的字符串。 //@param{Date}date日期。 //@param{String}format日期格式,Y-年,m-月,d-日,H-24小时,i-分钟,s-秒 //@return{String}返回格式化后的字符串。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.format(date,'Y-m-dH:i:s');//2012-10-2014: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}返回天数,取值范围0~364,如果是闰年则有365。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.getDayOfYear(date);//返回293 //Ext.Date.getDaysInMonth(date)获取date是月中的第几天 //@param{Date}date日期。 //@return{Number}返回天数。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.getDayOfYear(date);//返回31 //Ext.Date.getFirstDateOfMonth(date)获取date所在月份的第一天 //@param{Date}date日期。 //@return{Date}返回所在月份的第一天。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.getFirstDateOfMonth(date);//返回MonOct01201200:00:00GMT+0800(中国标准时间) //Ext.Date.getFirstDayOfMonth(date)获取date所在月份第一天的星期 //@param{Date}date日期。 //@return{Number}返回所在月份第一天的星期,取值范围0~6。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.getFirstDayOfMonth(date);//返回1,表示星期一 //Ext.Date.getLastDateOfMonth(date)获取date所在月份的最后一天 //@param{Date}date日期。 //@return{Date}返回所在月份的最后一天。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.getLastDateOfMonth(date);//返回WedOct31201200:00:00GMT+0800(中国标准时间) //Ext.Date.getLastDayOfMonth(date)获取date所在月份最后一天的星期 //@param{Date}date日期。 //@return{Number}返回所在月份最后一天的星期,取值范围0~6。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.getLastDayOfMonth(date);//返回3,表示星期三 //Ext.Date.getWeekOfYear(date)获取date所在年中的第几个星期 //@param{Date}date日期。 //@return{Number}返回所在年中的第几个星期,取值范围1~53。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.getWeekOfYear(date);//返回42 //Ext.Date.isLeapYear(date)date所在年份是否闰年 //@param{Date}date日期。 //@return{Boolean}true表示闰年,false表示平年。 //Example vardate=newDate('10/20/201214:30:00'); Ext.Date.isLeapYear(date);//返回true //Ext.Date.now()返回当前时间到1970年1月1日的毫秒数。 //在chrome、ie9和ie10中已经有Date.now()实现相同的功能。 //@return{Number}返回毫秒数。 //Example vartimestamp=Ext.Date.now();//1351666679575 vardate=newDate(timestamp);//WedOct31201214:57:59GMT+0800(中国标准时间) //Ext.Date.parse(input,format,strict)根据输入的字符串创建日期,Date.parse()有类似的功能。 //@param{String}input日期字符串。 //@param{String}format日期格式。 //@param{Boolean}strict验证input字符串的有效性,默认是false。 //@param{Date}返回创建的日期。 //Example varinput='2012年10月31日14:30:00'; varformat='Y年m月d日H:i:s'; vardate=Ext.Date.parse(input,format,true);//WedOct31201214:30:00GMT+0800(中国标准时间)
实例:实现带week(星期)的日期选择控件
1.问题:
是否使用了ExtJS就可以完美的解决星期的问题呢?
在本系列的第一篇就有说到,Ext的datepicker并不能看到星期,需要自己去扩展。
但是,扩展的时候就有一个问题了:
Javascript语言的Date对象每周是从星期天开始。
而ExtJS的getWeekOfYear这个方法却又是遵循ISO-8601,每周是从星期一开始的。(其他的方法又有不是遵循此标准的,ExtJS混合了不同的日期时间表示标准)。
Ext.Date.getWeekOfYear这个方法的返回值是1-53之间的数。
这样的话,就会出现一些问题:
Extjs的日期显示控件的显示是从星期天开始:(SMTWTFS(星期天星期一星期二 ..星期六))
但是,通过选中的时间获取星期时却又是从星期天开始。导致:
每个星期天的星期会小1(比如2013/08/18,星期天,应该是34周,但是通过这个方法却是算成上一周的结尾,33周)
date=newDate("2013/08/18");
varweek=Ext.Date.getWeekOfYear(date);
alert("week="+week);
ExtJs日期控件默认显示了42天,这样的话,在两个年交互的地方就会出现问题
是当年显示53周呢?还是下一年的第一周。
2.解决方案:
结合js的Date对象和Extjs的Ext.Date,实现获取星期字串。
每周以星期天为第一天
每年的周数从(1-52),如果超过52周,算到下一年的第一周。比如2013/12/29为2013年的53周,算到2014年的第一周
返回“W1334”这样的周的格式
/* *returnasW1334()2013/08/20 *1.ifsunday==>week=week+1 *getWeekOfYear(ExtuseISO-8601,weekbeginmonday) *jsDate(weekbeginsunday) *2.ifweek>52==>year=year+1;week=week-52; *3.ifmonth==11(12month)andweek<2==>year=year+1; */ functiongetWeekStrOfDate(date) { varweekStr=null; if(date!=null) { weekStr="W"; vardateYear=date.getFullYear(); vardateWeek=Ext.Date.getWeekOfYear(date); varfirstDayOfMonth=Ext.Date.getFirstDayOfMonth(date); varday=date.getDate(); varmonth=date.getMonth(); //weekday0-6 varweekday=date.getDay(); if(weekday===0) { dateWeek++; } //week>52==>year+1 if(month==11) { if(dateWeek>52) { dateYear+=1; dateWeek-=52; }elseif(dateWeek<2){ dateYear+=1; } } varyearStr=dateYear.toString(); yearStr=yearStr.substring(2,4); vardateWeekStr=dateWeek.toString(); if(dateWeekStr.length<2) { dateWeekStr="0"+dateWeekStr; } weekStr+=yearStr; weekStr+=dateWeekStr; } returnweekStr; }