当前位置: 代码网 > it编程>前端脚本>ExtJs > Ext JS框架中日期函数的用法及日期选择控件的实现

Ext JS框架中日期函数的用法及日期选择控件的实现

2024年05月15日 ExtJs 我要评论
ext.date是一个单例,封装了一系列日期操作函数,扩展javascript date的功能,下面列出一些常用的功能。基本函数: ext.date.add(date, interval, valu

ext.date是一个单例,封装了一系列日期操作函数,扩展javascript date的功能,下面列出一些常用的功能。
基本函数:

  • 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} 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); //返回结果 fri nov 03 2006 00:00:00 gmt+0800 (中国标准时间) 
 
var date = ext.date.add(new date('10/29/2006'), ext.date.day, -5); //减少5天,如果值是负数,则减少。 
console.log(date); //返回结果 tue oct 24 2006 00:00:00 gmt+0800 (中国标准时间) 
 
var date = ext.date.add(new date('10/29/2006'), ext.date.year, 2); //增加2年 
console.log(date); //返回结果 wed oct 29 2008 00:00:00 gmt+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 
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的时间设置成00小时00分00秒000毫秒。 
// @param  {date}   date  
// @param  {bollean} clone 可选参数。如果为true则返回date的一个副本,如果为false则返回date本身,默认为false。 
// @return {date}      返回设置后的日期。 
// example 
var date = new date('10/30/2012 14:30:00'); 
ext.date.cleartime(date); //返回 tue oct 30 2012 00:00:00 gmt+0800 (中国标准时间) 
 
 
// ext.date.clone(date) 克隆date的一个副本。 
// @param  {date} date 
// @return {date} 返回克隆后的date。 
// example 
var orig = new date('10/30/2012'); 
var copy = 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 
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}    返回天数,取值范围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}    返回天数。 
// 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 (中国标准时间) 
 
 
// 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 (中国标准时间) 
 
 
// 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所在年中的第几个星期 
// @param  {date}  date 日期。 
// @return {number}    返回所在年中的第几个星期,取值范围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()   返回当前时间到1970年1月1日的毫秒数。 
//          在chrome、ie9和ie10中已经有date.now()实现相同的功能。 
// @return {number} 返回毫秒数。 
// example 
var timestamp = ext.date.now(); //1351666679575 
var date = new date(timestamp); //wed oct 31 2012 14:57:59 gmt+0800 (中国标准时间) 
 
 
// ext.date.parse(input, format, strict) 根据输入的字符串创建日期,date.parse()有类似的功能。 
// @param {string}  input  日期字符串。 
// @param {string}  format 日期格式。 
// @param {boolean} strict 验证input字符串的有效性,默认是false。 
// @param {date}       返回创建的日期。 
// 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 (中国标准时间)

 

实例:实现带week(星期)的日期选择控件
1.问题:

是否使用了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 (比如2013/08/18 , 星期天, 应该是34周,但是通过这个方法却是算成上一周的结尾 , 33 周)
date = new date("2013/08/18");
var week = ext.date.getweekofyear(date);
alert("week="+week);
ext js 日期控件默认显示了 42天, 这样的话,在两个年交互的地方就会出现问题
是当年显示 53 周呢? 还是下一年的第一周。

2.解决方案:

结合js 的date 对象和 ext js的ext.date, 实现获取星期字串。

每周以星期天为第一天

每年的周数从(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;
}

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com