Ext JS 4实现带week(星期)的日期选择控件(实战二)


Posted in Javascript onAugust 21, 2013

前言

JavaScript 中的日期和时间
Ext JS 4实现带week(星期)的日期选择控件(实战一)

如对本篇的一些预备知识需详尽了解,可参考以上两篇。
Javascript 有提供Date 对象用于处理时间。但是Date 并没有提供获取星期的方法。
要在web 端通过js 方式获取某个时间是这一年的第几个星期,可以根据一些算法去实现。 当然, jquery 的扩展组件 等有直接提供这样的一些现成包。
像Ext js 就有提供获取星期的方法 Ext.Date.getWeekOfYear(date).

问题

是否使用了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. 每个星期天的星期会小1 (比如2013/08/18 , 星期天, 应该是34周,但是通过这个方法却是算成上一周的结尾 , 33 周)

date = new Date("2013/08/18"); 
var week = Ext.Date.getWeekOfYear(date); 
alert("week="+week);

2. Ext Js 日期控件默认显示了 42天, 这样的话,在两个年交互的地方就会出现问题

是当年显示 53 周呢? 还是下一年的第一周。

解决方案

结合js 的Date 对象和 Ext js的Ext.Date, 实现获取星期字串。
1. 每周以星期天为第一天
2. 每年的周数从(1-52), 如果超过52 周,算到下一年的第一周。 比如2013/12/29 为 2013年的53周, 算到 2014年的第一周
3. 返回 “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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
vue之将echart封装为组件
Jun 02 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 #Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 #Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 #Javascript
jquery设置控件位置的方法
Aug 21 #Javascript
获取表单控件原始(初始)值的方法
Aug 21 #Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 #Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
discuz安全提问算法
2007/06/06 PHP
php 中文处理函数集合
2008/08/27 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php中error与exception的区别及应用
2014/07/28 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
python回调函数的使用方法
2014/01/23 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python编写微信公众号首图思路详解
2019/12/13 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
运动会开幕式主持词
2014/03/28 职场文书
法学自荐信
2014/06/20 职场文书
班级体育活动总结
2014/07/05 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
污染环境建议书
2015/09/14 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL