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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
js实现上传并压缩图片效果
Jan 10 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 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
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
jquery如何获取复选框的值
2013/12/12 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
js实现简单的打印表格
2020/01/15 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
如何在django中运行scrapy框架
2020/04/22 Python
python re.match()用法相关示例
2021/01/27 Python
青年创业培训欢迎词
2014/01/10 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
集体生日活动方案
2014/08/18 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
2015年技术员工作总结
2015/04/10 职场文书
小学生表扬稿范文
2015/05/05 职场文书
工程项目合作意向书
2015/05/08 职场文书
借款民事起诉状范文
2015/05/19 职场文书
电台广播稿范文
2015/08/19 职场文书
节约用水广告语60条
2019/11/14 职场文书
Django实现翻页的示例代码
2021/05/24 Python