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 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
javascript判断office版本示例
Apr 11 Javascript
js单词形式的运算符
May 06 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
javascript如何写热点图
Dec 08 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
AngularJS 事件发布机制
Aug 28 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
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
Python语言描述最大连续子序列和
2017/12/05 Python
Tesserocr库的正确安装方式
2018/10/19 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python 代码运行时间获取方式详解
2020/09/18 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
企业办公室主任岗位职责
2014/02/19 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
学校安全责任书
2014/04/14 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
护士工作失误检讨书
2014/09/14 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
鲁迅故里导游词
2015/02/05 职场文书
世界地球日活动总结
2015/02/09 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
甲午风云观后感
2015/06/02 职场文书
小学思想品德教学反思
2016/02/24 职场文书
详解nginx location指令
2022/01/18 Servers
MySQL批量更新不同表中的数据
2022/05/11 MySQL