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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
深入了解JS之作用域和闭包
Jun 16 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按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
AngularJS入门之动画
2016/07/27 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python引用模块和查找模块路径
2016/03/17 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Windows下python3.6.4安装教程
2018/07/31 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python 创建一维的0向量实例
2019/12/02 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
python中tab键是什么意思
2020/06/18 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
Shell如何接收变量输入
2016/08/06 面试题
互联网创业计划书的书写步骤
2014/01/28 职场文书
给面试官的感谢信
2014/02/01 职场文书
教师求职信
2014/06/17 职场文书
合同意向书范本
2014/07/30 职场文书
员工团队活动方案
2014/08/28 职场文书
创先争优个人总结
2015/03/04 职场文书
投诉信格式范文
2015/07/02 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python