js--easyUI datetimebox 自定义显示格式 .

项目里需要显示自定义显示格式，比如只显示yyy,yyyy-mm,yyyy-mm-dd等格式。直接设置formatter参数的话，总是报错。用firefox调试后发现，好像在设置新的日期时

datetimebox控件会调用默认的parser指定的函数，把字符串转为日期格式。由于默认的只认"yyyy-MM-dd hh:mm:ss"格式(可以是其它分隔符,并非一定要是'-'),所以如果formatter函数返回的不是这个格式,会报错。

下面是我自己的实现方式：

datetimebox 设置:

[javascript] view plaincopyprint?

1. //加载日期控件   
2. function loadDate() {  
3.     startDTObj = $("#startDate");  
4.     endDTObj = $("#endDate");  
5.     startDTObj.datetimebox({  
6.                 showSeconds:false,  
7.                 formatter: formatDateText,  
8.                 parser: parseDate  
9.             });  
10.     endDTObj.datetimebox({  
11.         showSeconds:false,  
12.         formatter: formatDateText,  
13.         parser: parseDate  
14.     });  
15. }  

//加载日期控件function loadDate() {    startDTObj = $("#startDate");    endDTObj = $("#endDate");    startDTObj.datetimebox({                showSeconds:false,                formatter: formatDateText,                parser: parseDate            });    endDTObj.datetimebox({        showSeconds:false,        formatter: formatDateText,        parser: parseDate    });}

[javascript] view plaincopyprint?

1. /格式化显示的文本  
2. function formatDateText(date) {  
3.     var rainType = rainTypeObj.combobox("getValue");  
4.     switch (rainType) {  
5.         case '0':  
6.                 return date.formatDate("yyyy-MM-dd hh:mm");  
7.             break;  
8.         case '1':  
9.                 return date.formatDate("yyyy-MM-dd hh");  
10.             break;  
11.         case '2':  
12.                 return date.formatDate("yyyy-MM-dd");  
13.             break;  
14.         case '3':  
15.                 return date.formatDate("yyyy-MM");  
16.             break;  
17.         case '4':  
18.                 return date.formatDate("yyyy-MM");  
19.             break;  
20.         case '5':  
21.                 return date.formatDate("yyyy");  
22.             break;  
23.         default:  
24.             break;  
25.     }  
26. }  

/格式化显示的文本function formatDateText(date) {    var rainType = rainTypeObj.combobox("getValue");    switch (rainType) {        case '0':                return date.formatDate("yyyy-MM-dd hh:mm");            break;        case '1':                return date.formatDate("yyyy-MM-dd hh");            break;        case '2':                return date.formatDate("yyyy-MM-dd");            break;        case '3':                return date.formatDate("yyyy-MM");            break;        case '4':                return date.formatDate("yyyy-MM");            break;        case '5':                return date.formatDate("yyyy");            break;        default:            break;    }}

本菜鸟写的，由于js,正则不是很熟，写得不好。月，日默认使用‘01’，时间部分默认使用‘00’

[javascript] view plaincopyprint?

1. //把时间格式字符串转化为时间   
2. //如下格式   
3. //2006   
4. //2006-01   
5. //2006-01-01   
6. //2006-01-01 12   
7. //2006-01-01 12:12   
8. //2006-01-01 12:12:12   
9. function parseDate(dateStr) {  
10.     var regexDT = /(\d{4})-?(\d{2})?-?(\d{2})?\s?(\d{2})?:?(\d{2})?:?(\d{2})?/g;  
11.     var matchs = regexDT.exec(dateStr);  
12.     var date = new Array();  
13.     for (var i = 1; i < matchs.length; i++) {  
14.         if (matchs[i]!=undefined) {  
15.             date[i] = matchs[i];  
16.         } else {  
17.             if (i<=3) {  
18.                 date[i] = '01';  
19.             } else {  
20.                 date[i] = '00';  
21.             }  
22.         }  
23.     }  
24.     return new Date(date[1], date[2]-1, date[3], date[4], date[5],date[6]);  
25. }  

//把时间格式字符串转化为时间//如下格式//2006//2006-01//2006-01-01//2006-01-01 12//2006-01-01 12:12//2006-01-01 12:12:12function parseDate(dateStr) {    var regexDT = /(\d{4})-?(\d{2})?-?(\d{2})?\s?(\d{2})?:?(\d{2})?:?(\d{2})?/g;    var matchs = regexDT.exec(dateStr);    var date = new Array();    for (var i = 1; i < matchs.length; i++) {        if (matchs[i]!=undefined) {            date[i] = matchs[i];        } else {            if (i<=3) {                date[i] = '01';            } else {                date[i] = '00';            }        }    }    return new Date(date[1], date[2]-1, date[3], date[4], date[5],date[6]);}

网上找的别人写的格式化日期的方法，很好用

[javascript] view plaincopyprint?

1. //为date类添加一个format方法   
2. //yyyy 年   
3. //MM 月   
4. //dd 日   
5. //hh 小时   
6. //mm 分   
7. //ss 秒   
8. //qq 季度   
9. //S  毫秒   
10. Date.prototype.formatDate = function (format) //author: meizz   
11. {  
12.     var o = {  
13.         "M+": this.getMonth() + 1, //month   
14.         "d+": this.getDate(),    //day   
15.         "h+": this.getHours(),   //hour   
16.         "m+": this.getMinutes(), //minute   
17.         "s+": this.getSeconds(), //second   
18.         "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter   
19.         "S": this.getMilliseconds() //millisecond   
20.     }  
21.     if (/(y+)/.test(format)) format = format.replace(RegExp.$1,  
22.     (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
23.     for (var k in o) if (new RegExp("(" + k + ")").test(format))  
24.         format = format.replace(RegExp.$1,  
25.       RegExp.$1.length == 1 ? o[k] :  
26.         ("00" + o[k]).substr(("" + o[k]).length));  
27.     return format;  
28. }  

//为date类添加一个format方法//yyyy 年//MM 月//dd 日//hh 小时//mm 分//ss 秒//qq 季度//S  毫秒Date.prototype.formatDate = function (format) //author: meizz{    var o = {        "M+": this.getMonth() + 1, //month        "d+": this.getDate(),    //day        "h+": this.getHours(),   //hour        "m+": this.getMinutes(), //minute        "s+": this.getSeconds(), //second        "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter        "S": this.getMilliseconds() //millisecond    }    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,    (this.getFullYear() + "").substr(4 - RegExp.$1.length));    for (var k in o) if (new RegExp("(" + k + ")").test(format))        format = format.replace(RegExp.$1,      RegExp.$1.length == 1 ? o[k] :        ("00" + o[k]).substr(("" + o[k]).length));    return format;}

完成后效果：

项目里需要显示自定义显示格式，比如只显示yyy,yyyy-mm,yyyy-mm-dd等格式。直接设置formatter参数的话，总是报错。用firefox调试后发现，好像在设置新的日期时

datetimebox控件会调用默认的parser指定的函数，把字符串转为日期格式。由于默认的只认"yyyy-MM-dd hh:mm:ss"格式(可以是其它分隔符,并非一定要是'-'),所以如果formatter函数返回的不是这个格式,会报错。

下面是我自己的实现方式：

datetimebox 设置:

[javascript] view plaincopyprint?

1. //加载日期控件   
2. function loadDate() {  
3.     startDTObj = $("#startDate");  
4.     endDTObj = $("#endDate");  
5.     startDTObj.datetimebox({  
6.                 showSeconds:false,  
7.                 formatter: formatDateText,  
8.                 parser: parseDate  
9.             });  
10.     endDTObj.datetimebox({  
11.         showSeconds:false,  
12.         formatter: formatDateText,  
13.         parser: parseDate  
14.     });  
15. }