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 miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
keep-alive保持组件状态的方法
Dec 02 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中的正规表达式(二)
2006/10/09 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
js tab 选项卡
2009/04/26 Javascript
jQuery的三种$()
2009/12/30 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
详解vue路由
2020/08/05 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
EJB面试题
2015/07/28 面试题
Prototype如何更新局部页面
2013/03/03 面试题
中学生校园广播稿
2014/01/16 职场文书
物流业务员岗位职责
2014/02/08 职场文书
库房管理员岗位职责
2014/03/09 职场文书
党员教师工作决心书
2014/03/13 职场文书
租房协议书范本
2014/04/09 职场文书