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


Posted in Javascript onMay 21, 2016

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;
}
Javascript 相关文章推荐
JavaScript 格式字符串的应用
Mar 29 Javascript
js函数排序的实例代码
Jul 01 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
基于node.js之调试器详解
Aug 22 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 #Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 #Javascript
javascript RegExp 使用说明
May 21 #Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 #Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 #Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 #Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 #Javascript
You might like
php类声明和php类使用方法示例分享
2014/03/29 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP 裁剪图片
2021/03/09 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python excel转换csv代码实例
2019/08/26 Python
python super函数使用方法详解
2020/02/14 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
Python脚本调试工具安装过程
2021/01/11 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
内勤主管岗位职责
2014/04/03 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
社区志愿者活动方案
2014/08/18 职场文书
死亡证明书样本说明
2014/10/18 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL