Ext JS 4实现带week(星期)的日期选择控件(实战二)

前言

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;
}

(0)

相关推荐

  • Ext JS 4实现带week(星期)的日期选择控件(实战一)

    前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供这样的配置. (针对Ext js 4来说,理想的相法是在Ext.picker.Date有一个 类似showWeek这样的配置项) 现有的解法 到网络上去看看基于Ext js 的解法:有找到两个 http://enikao.net/extjs/weeknumber/weeknumber.html 和

  • ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法

    正常的引用 复制代码 代码如下: <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AjaxToolKit" %><asp:TextBox ID="txtRecordTime" runat="server" cssclass="style" width

  • Ext JS框架中日期函数的用法及日期选择控件的实现

    Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScript Date的功能,下面列出一些常用的功能. 基本函数: Ext.Date.add(date, interval, value) 给date增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. Ext.Date.between(date, start, end) 判断date是否在start和end之间. Ext.Date.clearTime(date, clone) 把date的时间设置成

  • Extjs4如何处理后台json数据中日期和时间

    当ASP.NET后台使用JavaScriptSerializer这个组件将对象序列化为json,或者使用ScriptMethod特性的json [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)] public List<EUser> Users()//参数测试用 { List<EUser> l = new List<EUser>(); Random a

  • Winform之TextBox输入日期格式验证yyyy-mm-dd

    复制代码 代码如下: private void button1_Click(object sender, EventArgs e)        {            string s = textBox1.Text.ToString();            bool b = ValidateDataTime(s);            string rs = "";            if (b)            {                rs = &qu

  • Extjs中DisplayField的日期或者数字格式化扩展

    使用 Ext.form.FormPanel 来处理数据时候,某些字段是需要只读的.当然我们可以使用 Ext.form.TextField,然后设置成 ReadOnly,不过这样子的显示效果不是很好,因为始终会有个输入框.所以我们必须使用 Ext.form.DisplayField,但是 Ext.form.DisplayField 没有一个format的属性,也不具备 renderer 这个事件,比如日期字段 var form = new Ext.form.FormPanel({frame: tr

  • Ext JS 4实现带week(星期)的日期选择控件(实战二)

    前言 JavaScript 中的日期和时间 Ext JS 4实现带week(星期)的日期选择控件(实战一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Date 对象用于处理时间.但是Date 并没有提供获取星期的方法. 要在web 端通过js 方式获取某个时间是这一年的第几个星期,可以根据一些算法去实现. 当然, jquery 的扩展组件 等有直接提供这样的一些现成包. 像Ext js 就有提供获取星期的方法 Ext.Date.getWeekOfYear(d

  • 实现轮转广告带底部指示的自定义ViewPager控件

    有许多博客和开源项目都致力于这项工作,但是他们的工作大都是为了制作类似于启动页的效果,ViewPager全屏显示,或者自己可操作的属性难以满足要求,因此我想把ViewPager和底部的指示物封装在一个自定义的View中,作为一个新的控件在xml中使用,所以自己来实现了一个.而且,在用自定义视图封装ViewPager时,出现了一个问题,就是ViewPager的所有页不能全部显示的问题,不知道是因为这个问题太简单还是什么其它原因,在网上并没有搜到这个问题的解决方法(事实上连提问的人都没有--),困扰

  • JS日期和时间选择控件升级版(自写)

    鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹

  • 日期 时间js控件

    复制代码 代码如下: <script language="JavaScript"> /**//** *本日历选择控件由tiannet根据前人经验完善而得.大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 <input type="text" name="date" readOnly onClick="s

  • js前端日历控件(悬浮、拖拽、自由变形)

    很少发现网上有简洁好用的自定义前端控件的贴子,最近项目中需要,自己YY开始写前端控件,在此给大家分享 控件是基于jQuery.UI的Widget写的,写起来就方便很多,使用起来跟普通jQuery控件一样$(#id).control(option),看着眼熟吧,下面就开始了. 首先说下控件的依赖包,加载控件的时候必须先加载jQuery, jQuqery.UI, 另外jquery-ui.css 这个包也需要引用,此包主要应用了jQuery拖拽和放缩的样式,控件样式方面大家自由发挥,给了个自己写的默认

  • JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

  • 原生js实现日期选择插件

    最近公司项目告一段落,想着写个小玩意打发下上班时间,就用js很粗糙的实现了下日期选择插件.间间断断历时1天多,实现了选择日期的功能,从写完的整体代码来看,耦合度还是蛮高的,我觉得还是我对js中的原型继承方式理解不深刻,一定有更优雅的方式再优化下这份粗糙的代码,各位前端小伙伴们在看完我的代码后请麻烦指出其中实现的不好的地方,有批评指正让我有动力继续写博客嘛! 先说下这个插件的功能:功能很简单,目前只实现了选择一个日期(当然可以赋初始值,默认是当前日期),选择跨月日期时,会有一个粗糙的动画效果,效果

  • sencha ext js 6 快速入门(必看)

    Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 1.YUI-Ext的作者Jack Slocum(杰克.斯洛克姆)打算对基于BSD协议的Yahoo User Interface (YUI)库进行自定义的扩展,但后来一度风头盖过其父辈YUI: 2.在2006年底,YUI-Ext被简化为Ext,反映了它作为一个框架的成熟和独立.该公司成立于2007年初,Ext现在为双执照,

随机推荐