ExtJS 2.2date的扩展

您现在的位置：.Net中文社区>> AJAX编程>>正文内容

ExtJS 2.2date的扩展

发布时间：2009年01月09日点击数：次

返回深入学习ExtJS 2.2开发系列连载教程目录
ExtJS支持Date中代表特殊含义字母。我们可以根据该字符来自定义所需时间格式。如需要的格式如下：today is sunday,its dateTime is:2007-08-02。我们可以采用dateObject.format(“today is sunday,its dateTime is:2007-08-02”)吗？不行，因为today单词中的所有字母都代表特殊含义。但是不让它代表特殊含义怎么办？反转义。采用//t形式来反转义其特殊含义为其本身字母。

2、DateObj.dateFormat()

它的使用不难，但是我得考虑其是如何实现的。实现过程当然得从对表3.6中特殊字符进行解析开始。如果判断了其字符是Y，就通过getFullYear从日期中取到四位年的数值替换Y字符所在位置。其它字符处理相似。接下问题是反转义字符的解析，如果解析到/字符时（在字符串/字符是通过//来表示的）。那么就判断其下一个字符不需要解析直接放在原来位置上。

接下我们考虑其性能，在日常中要用的时间格式不就是那么几种，如Y-m-d等。如果每一次调用时都要解析格式会影响性能，能不能重用之前解析相同的格式转换呢。ExtJS对格式转换采用了编译方法，第一次需要编译，之后就可以重用，提高了性能。我们先从data.Format入口来分析其实现：

日期和时间是日常生活中不可缺少的部分，在软件中也不可避免地使用它们。JavaScript提供了Date对象来处理日期和时间。一个Date对象代表一个具体的时间，Date对象也提供了一些属性和方法来方便们对于时间操作。ExtJS对JS Date对象进行极大地扩展，使用日期和时间变得极为简单。下面我们就从原生Date和ExtJS进行的扩展两个方面来介绍。

3.5.1原生Date对象
我们可以通过new Date()来获到系统当前日期和时间，还可以通过以下四种方式来构建自己指定的日期：
new Date(month,dd,yyyy hh:mm:ss)
new Date(month,dd,yyyy)
new Date(yyyy,mth,dd,hh,mm,ss)
new Date(ms);
对于其构建函数的参数，如分秒等没有指定，其都采用默认的0值进行处理。我们也可以通过Date.parse(datestring)来构建指定的Date对象。构建完成之后就可以通过它的各式各样的tostring方法来获取其时间文本格式。

函数	说明	例子
toString()	转换为字符串。	Sat Sep 6 10:10:31 UTC+0800 2008
toTimeString()	时间部分转换为字符串。	10:10:31 UTC+0800
toDateString()	日期部分转换为字符串。	Sat Sep 6 2008
toGMTString()	转换为格林威治时字符串。	Sat, 6 Sep 2008 02:10:31 UTC
toUTCString()	转换为世界时字符串。	Sat, 6 Sep 2008 02:10:31 UTC
toLocaleString()	转换为本地时字符串。	2008年9月6日 10:10:31
toLocaleTimeString()	时间部分转换本地时字符串	10:10:31
toLocaleDateString()	日期部分转换本地时字符串	2008年9月6日

表3.4 Date的toString函数

在上表中可以看出tostring给出的信息最完全的，不但有日期，时间、星期，还有时差。而GTM的时间与UTC的时间是则是相同的。而在实际应用中，可能并不需要日期时间等综合体，而是需要某一部分，如今天是星期几等。时间单元可以分成如下8种：Year,month,date,day.hour,minutes,second,milliseconds。Date对象对这8种最小单元分别给出其操作函数。

函数	说明	例子
getFullYear()	返回四位数字年份	2008
getYear()	返回两位或四位数字年份。	2008 (108 FF中)
getUTCFullYear()	返回四位数字年份	2008
getMonth()	返回月份 (0 ~ 11)	8
getUTCMonth()	返回月份 (0 ~ 11)	8
getDate()	返回月中的某一天 (1 ~ 31)	6
getUTCDate()	返回月中的一天 (1 ~ 31)	6
getHours()	返回的小时 (0 ~ 23)	10
getUTCHours()	返回小时 (0 ~ 23)	2
getMinutes()	返回分钟 (0 ~ 59)	41
getUTCMinutes()	返回分钟 (0 ~ 59)	41
getSeconds()	返回秒数 (0 ~ 59))	3
getUTCSeconds()	返回秒钟 (0 ~ 59)	3
getMilliseconds()	返回毫秒(0 ~ 999)	187
getUTCMilliseconds()	返回毫秒(0 ~ 999)	187
getDay()	返回星期 (0 ~ 6)	6
getUTCDay()	返回星期(0 ~ 6)	6
getTime()	返回毫秒数	1220668863187
getTimezoneOffset()	返回时差 (GMT)	-480（以分为单位东8区）

表3.5 Date的时间函数

在上表可以看出对于这八种最小单元，它都提供了UTC世界时，一般的情况与通常的时间是没有差别的。在上表中小时有点和通用的时间对不上。getYear在mozilla中FF中返回是108。是一个不对数据。为了兼容我们最好采用getFullYear。就是想取08年也采用getFullYear的后二位就可以了。对于其相对应的set方法，就不作介绍。

3.5.2 ExtJS扩展Date对象
上小节中给出的Date对象的函数功能有点不足，对于日期的使用有两个方面：一是显示，二是要计算。显示是要按一定格式进行显示，比如我们按2007-08-07或2007-8-7格式。有特殊需求的时候，可能还要更复杂一点。计算主要是计算时间差，如这一周的星期一是多少号，从吃饭到现在过了多长时间，还有他是否在指定的日期时完成任务等等，这些都是要计算比较的操作。但是在Date对象中没有提供相关的函数。

1、日期格式化
表3.4和表3.5中，我们可以看到各式各样的tostring()方法。不同的函数都能显示不同格式的时间文本。但是这样不灵活，如果要用到自定义的格式怎么办？如对于日期 2007/07/02可以通过getFullYear+”//”+getMonth+”//”+getDate来完成吗？不行。它显示是2007/7/2。这样就得在getMonth前面加上'0'字符进行填充。对于这个日期是可以。但是对于2007/11/2其又不需要。这里是要进一步判断其是否大于10，大于则就不必加上0。

这样处理是一件很麻烦的事情。Php或.Net的时间函数使用特方便，还能支持自定义格式。如dataObject.format(“Y-m-d”)就可以完成该任务，如果不需要0添充，则采用dataObject.format(“Y-n-j”)来实现。

ExtJS也提供了该功能的实现，采用一些字母代表特殊含义（如Y表达四位的年），之后解析这些字母，最终通过Date提供方法来取得相对应的数据。如Y采用getFullYear的函数。那么ExtJS到底支持哪些字母呢？

字母	说明	例子
年份字母表义
Y	四位数的年	2008
y	二位数的年	08
o	四位数的年	2007
月份字母表义
m	不足二位采用0填充的月份	01~12
n	不采用0填充的月份	1~12
M	短文本的月份	Jan 至Dec
F	长文本的月份	January至December
t	月份中的天数	28，29，30，31四种
日期字母表义
d	不足二位采用0填充的日期	01~31
j	不采用0填充的日期	1~31
日期字母表义
N	星期几的数字	1~7（星期一~天）
D	星期几的短文本	Mon 至 Sun
l	星期几的长文本	Sunday ~aturday
w	星期几的数字	0~6（星期天~六）
常用的判断
W	当前星期是当前年中第几周（周一开始）	0~53
Z	当前日期是当前年中第几天（0开始）	234
L	当前年是否为闰年（1：是，0不是）	0
S	判断日期以0，1，2，3之一为最后一个数字	St(1), nd(2), rd(3),th(0)
小时及上午下午
a	上午还是下午	am或pm
A	上午还是下午	AM或PM
g	12小时制（不补0）	1~12
G	24小时制（不补0）	0~23
h	12小时制（补0）	01~12
H	24小时制（补0）	00~23
分钞
i	分钟	00~59
s	钞	00~59
u	毫秒	000~999
时区
P	时区	-08：00
T	时区（缩写）	EST,
Z	时区以秒为单位	-43200
综合的时间
c	Iso的日期格式	2007-04-17T15:19:21+08:00
U	Times以毫秒为单位	1193432466

表3.6 Date的特殊字符含义

上表是ExtJS支持Date中代表特殊含义字母。我们可以根据该字符来自定义所需时间格式。如需要的格式如下：today is sunday,its dateTime is:2007-08-02。我们可以采用dateObject.format(“today is sunday,its dateTime is:2007-08-02”)吗？不行，因为today单词中的所有字母都代表特殊含义。但是不让它代表特殊含义怎么办？反转义。采用//t形式来反转义其特殊含义为其本身字母。

2、DateObj.dateFormat()
它的使用不难，但是我得考虑其是如何实现的。实现过程当然得从对表3.6中特殊字符进行解析开始。如果判断了其字符是Y，就通过getFullYear从日期中取到四位年的数值替换Y字符所在位置。其它字符处理相似。接下问题是反转义字符的解析，如果解析到/字符时（在字符串/字符是通过//来表示的）。那么就判断其下一个字符不需要解析直接放在原来位置上。

接下我们考虑其性能，在日常中要用的时间格式不就是那么几种，如Y-m-d等。如果每一次调用时都要解析格式会影响性能，能不能重用之前解析相同的格式转换呢。ExtJS对格式转换采用了编译方法，第一次需要编译，之后就可以重用，提高了性能。我们先从data.Format入口来分析其实现：

Date.prototype.dateFormat = function(format) {

if(Date.formatFunctions[format]== null){ //如果未找到编译格式则创建

Date.createNewFormat(format);}

var func = Date.formatFunctions[format];

return this[func]();}; //找到了就直接调用编译过格式。

Date.prototype.format = Date.prototype.dateFormat;

从这一段代码可以看出DateObj的format函数和dateFormat函数是同一个函数。它对传入字符串进行解析，因为第一次是采用编译方式来提高性能，所以如果在Date.formatFunctions缓存中没有找到传入字符串的编译之后的函数，就去进行编译，如果找到就直接运行它。

Date.createNewFormat = function(format) {

var funcName = "format" +Date.formatFunctions.count++;//编译格式函数名

Date.formatFunctions[format] = funcName;

var code = "Date.prototype." + funcName + " = function(){return "
上面代码是生成函数名并把该函数名通过其传入的格式字符串做为属性名保存在Date.formatFunctions中。之后在该对象中动态生成一个函数。①②处的/if和 else if是处理那些不需要解析的字符，如采用//t形式。③则是通过getFormatCode来进行解析特殊字符。

Date.getFormatCode = function(character) {

switch (character) {

case "d": return "String.leftPad(this.getDate(), 2, '0') + ";

.. .. ..

case "l": return "Date.dayNames[this.getDay()] + "; ①

case "N": return "(this.getDay() ? this.getDay() : 7) + ";

.. .. ..

case "U": return "Math.round(this.getTime() / 1000) + ";

default: return "'" + String.escape(character) + "' + ";

}};

从上面代码可以看出，它无非就是把根据字符来作相对应的处理。如d它就是采用String.leftPad来为不满指定位数的前面添充0。其具体的处理每个字符都不一样，但很相似。

3、Date.parse()
可以把Date按一定格式化显示出来，那么能不能反过来为，一定格式化的数据能不能转换成标准Date对象，也就是Date.parse()功能，parse（）只能按简单的几种构建Date方式的字符串分析。而现在的处理更复杂，如time:2007--03,要解析成标准的Date对象。就是把time去掉提取2007—03起来，Date.parse（）还是解析不了。

解析字符串为Date对象成为是一件难事。再如2007-03，其没有小时分秒之类的时间单元，可以采用Date.parse（）解析，但没有的部分都采用0代替，还是采用当前的时间。也就是与标准的要素相差的部分就用当前的时间部分来填充。ExtJS中Date.parseDate是根据指定格式来解析字符串提取字符串中日期信息构建起Date对象，如Date.parseDate(‘this Y-m-d’，‘\\t\\h\\i\\s 2008-12-22’)。第一个参数就是要解析的字符串，第二个参数就是该字符串按什么样的格式来提取其中date信息最终形成Date对象。Date.parseDate的实现和dateFormat差不多，其是采用Date.createParser来实现解析：

点击展开示例
createParser是用来创建解析传入字符串的函数，它把用来提取格式化字符串转换成正则表达式，需要解析的字符串和该正则表达式进行匹配，采用正则表达式子匹配提取解析字符串每个和Date相关的最小单元。

该编译之后的函数分成②④⑥三部分，②处是用来进行一些初始化工作，如y,m,d则是分别取到当前的年月日，如果解析字符串没有指定相关年月日，就用它们来代替。③处的判断用的正则表达式是通过⑦处保存在Date.parseRegexes数组中对应于的位置上。而⑦处则是通过④处的代码生成正则表达式。

④处是用来解析格式化字符串，它与Date.getFormatCode有很大区别，它完成二个方面工作，一是把格式化符串构建成一个完整的正则表达式。二是生成编译函数中运行代码。Date.formatCodeToRegex返回对象如下：{g:0,c:null s:xx};

其中g表示计算组（group）,只能选择0和1两个值，1表达需要计算处理，0则相反。c是用来指定计算的代码。如group为1，那就是需要计算处理，这就得生成编译函数中进行计算的运行代码，c如果不需要计算，那么就为null。s是正则表达式。该正则表达式是针对于格式化字符串的一个字符。对于非特殊字符，它采用字符本身，对于需要解析的特殊含义字符，它则转换成一定形式的表达式，如d字符对应的s是(\\d{2})"。

每个对应的字符都在parseCodes函数中，我们只列举d来作为说明：

d: { g:1, c:"d = parseInt(results[{0}], 10);\n", s:"(\\d{2})" }

⑤处代码就是把这其中的c的执行语句编译到编译函数中去，把其s串起来最后通过⑦处代码保存。通过④⑤每个字符的解析，接下来就是一些扫尾工作。⑥处就是根据生成的间8种最小单元的部分来构建Date对象。⑥处可以看出new Date的所有形式的应用。它应该是最全的Date构建函数的应用。

在这里我们仅仅是把它的原理进行了分析，每个字符的解析都不一样，读者应该对着源码去分析其它的部分。如果想查看编译之后的函数源码，因为它是保存在Date.parseFunctions集合中对应的format元素中，也就是说可以找到这个函数之后通过其toString就可以查看其编译的源码。

4、日期的比较及计算
前面分析了日期格式化的应用和实现，在日期应用中还有一块就是日期比较与计算。比比较计算某日期5天之后的日期，对于每年每月都是不一样。年有闰与不闰之分，月有大月小月分，自行计算麻烦。ExtJS提供相关的函数。

between函数，它是用来判断当前日期对象的时间是否在指定的范围之内，它有start和end两个参数用来指定毫秒值，一般这两个值都是通过DateObj.getTime()来取得，而不应该由自己指定。

add函数，它通过与当前日期对象的时间间隔差来计算日期，它的第一个参数是用来指定时间间隔的单位，也就是除了Date之外其它七种最小时间单元。如new Date('10/1/2006').add(Date.DAY, -5)用来计算之前5天的日期。

getElapsed函数，它是计算当前日期对象的时间与指定日期时间或运行getElapsed日期时间的时间差。在测试的分析效率的时候很有用。

;

var special = false, ch = '';

for (var i = 0; i < format.length; ++i) {

ch = format.charAt(i);

if (!special && ch == "\\") {special = true; } ①

else if (special) {special = false;

code += "'" + String.escape(ch) + "' + "; } ②

else {code += Date.getFormatCode(ch); } } ③

eval(code.substring(0, code.length - 3) + ";}");};

ExtJS 2.2date的扩展

2、DateObj.dateFormat()

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新