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加载速度慢的解决方案
Mar 11 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
video.js使用改变ui过程
Mar 05 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php字符串过滤与替换小结
2015/01/26 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
网页常用特效代码整理
2006/06/23 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
浅谈js闭包理解
2019/04/01 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
一夜的工作教学反思
2014/02/08 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
理财计划书
2014/08/14 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers