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 相关文章推荐
jquery json 实例代码
Dec 02 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
javascript字符串函数汇总
Dec 06 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
Vue.set 全局操作简单示例
Sep 19 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
通过文字传递创建的图形按钮
2006/10/09 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python中的lambda表达式用法详解
2016/06/22 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
python如何操作mysql
2020/08/17 Python
python 装饰器的使用示例
2020/10/10 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
大学生新学期计划书
2014/04/28 职场文书
酒店管理求职信
2014/06/09 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书