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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
通过实例了解JS 连续赋值
Sep 24 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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&amp;java(二)
2006/10/09 PHP
php备份数据库类分享
2015/04/14 PHP
PHP文件操作实例总结
2016/09/27 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python制作一个桌面便签软件
2015/08/09 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python 调试冷知识(小结)
2019/11/11 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python IP地址转整数
2020/11/20 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
shell变量的作用空间是什么
2013/08/17 面试题
工厂厂长岗位职责
2013/11/08 职场文书
团组织关系介绍信
2014/01/12 职场文书
打造完美自荐信
2014/01/24 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
探亲假请假条
2014/04/11 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android