前言

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;

}

extjs 月份选择控件_Ext JS 4实现带week(星期)的日期选择控件(实战二)相关推荐

  1. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> "2. 每年的周数从(1-52), 如果超 ...

  2. [Ext JS 4] 实战之 带week(星期)的日期选择控件(二)

    前言 JavaScript 中的日期和时间 [Ext JS 4] 实战之 带week(星期)的日期选择控件(一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Dat ...

  3. [Ext JS 4] 实战之 带week(星期)的日期选择控件

    前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...

  4. easyUI自带的时间插件日期选择、月份选择、时间选择的使用(转)

    1.日期选择 只要将class设置成easyui-datebox就可以了,当然前提是已经应用了easyui的js [html] view plain copyprint? <input type ...

  5. 9 款样式华丽的 jQuery 日期选择和日历控件

    现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...

  6. antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用

    现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了. 但是在选择的时候发现了问题, ...

  7. Element Plus 实例详解(三)___Date Picker 日期选择

    Element Plus 实例详解(三) ___Date Picker 日期选择 文章目录: 一.前言 二.搭建Element Plus试用环境 1.搭建Vue3项目(基于Vite + Vue) 2. ...

  8. HTMO DOM部分---小练习;列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。...

    一:列表之间数据移动 第一个列表里面有内容,第二个里面没有 实现功能: 点击左侧列表选中一项内容,点击按钮,复制到右侧 点击复制所有按钮,将左侧列表所有数据,复制到右侧 扩展功能:右侧列表实现去重复 ...

  9. extjs 月份选择控件_ExtJs日期控件案例(可控制时间的选择) | 学步园

    图片效果: ExtJs代码: /* *********************************************************************日期控件的简单案例**** ...

最新文章

  1. c语言进制转换pdf下载,C语言实现任意进制转换.doc
  2. ASP.NET 开发小技巧 (持续更新)
  3. Server Tomcat v7.0 Server at localhost was unable tonbs 报错问题解决
  4. linux的grup文件,Linux /boot/grub/grub.conf(GRUB配置文件)内容详解
  5. 使用darknet-dnn-GPU方式识别物体(一)
  6. hi35xx stmmac网卡驱动源码解读
  7. Invalid prop: type check failed for prop price. Expected String, got Number.
  8. 【解决方案】SkeyeVSS石油油田钻井无线智能视频监控系统解决方案
  9. 支付宝小程序复制到剪贴板
  10. 力扣(SQL)584. 寻找用户推荐人
  11. 【人类历史】从食物采集者到食物生产者
  12. MATLAB地图工具箱学习总结(三)地图工具箱的基本知识
  13. html-css10 过渡/米兔练习/动画/动画练习/小球动画/平移和小米移动图
  14. java 将set转成数组,Java程序将Set转换为数组
  15. Manifest merger failed : uses-sdk:minSdkVersion 19 cannot be smaller than version 21 declared in lib
  16. WordPress自定义分页代码
  17. 关于编程,鲜为人知的真相
  18. java滚动字幕的实现的实训_实现滚动字幕
  19. 西门子plc200smart与施耐德ATV12变频器modbus通讯程序,可以帮你学会modbus通讯,是程序
  20. 交响乐排布及乐器音色特点

热门文章

  1. 暴雪2013年内发布linux游戏,只因win8是场灾难?
  2. brew 安装php7.1.6_mac上通过brew安装php7
  3. 【论文写作】毕业论文写作套路之参考文献
  4. keil删除工程_RTT 是如何管理和构建工程的?
  5. fillrect不填充被覆盖的区域 mfc_纹理和图案填充
  6. 删除oracle 连接进程,如何查看和清除oracle无用的连接进程
  7. php 利用redis写一个聊天室,使用Redis完成聊天室功能
  8. 本地html如何导出pdf,html表格以pdf格式导出到本地
  9. c语言第一周项目,C语言第一周实战
  10. QMessageBox自定义大小