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 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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+DBM的同学录程序(4)
2006/10/09 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
node实现简单的反向代理服务器
2017/07/26 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
Python实现包含min函数的栈
2016/04/29 Python
python中set()函数简介及实例解析
2018/01/09 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
表扬信格式模板
2015/05/05 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL