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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
JS canvas实现画板和签字板功能
Feb 23 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
子页向父页传值示例
2013/11/27 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
django框架防止XSS注入的方法分析
2019/06/21 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Foreo国际站:Foreo International
2018/10/29 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
new修饰符是起什么作用
2015/06/28 面试题
Ruby如何定义一个类
2012/10/08 面试题
资金主管岗位职责范本
2014/03/04 职场文书
项目投资意向书
2014/04/01 职场文书
服务承诺书怎么写
2014/05/24 职场文书
企业文化理念标语
2014/06/10 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
培训通知
2015/04/17 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
python基础之类属性和实例属性
2021/10/24 Python