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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
JS编程小常识很有用
Nov 26 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
vue下的@change事件的实现
Oct 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
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
pycharm修改file type方式
2019/11/19 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
2014年个人委托书范本
2014/10/13 职场文书
安全责任书
2015/01/29 职场文书
人事局接收函
2015/01/30 职场文书
2016春节慰问信范文
2015/03/25 职场文书