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 Global对象
Aug 13 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php修改时间格式的代码
2011/05/29 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
JS实现简单打字测试
2020/06/24 Javascript
pandas 选取行和列数据的方法详解
2019/08/08 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
what is the difference between ext2 and ext3
2015/08/25 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
竞选部门副经理的自荐书范文
2014/02/11 职场文书
合作经营协议书范本
2014/04/17 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
2014年化验员工作总结
2014/11/18 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL