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 多级checkbox选择效果
Aug 20 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
微信小程序开发摇一摇功能
Nov 22 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
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
loading动画特效小结
2017/01/22 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
银行会计财务工作个人的自我评价
2013/10/29 职场文书
采购主管的岗位职责
2013/12/17 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
力学专业求职信
2014/07/23 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
展览会邀请函
2015/02/02 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript