easyUI datetimebox 自定义显示格式

源文地址：http://blog.csdn.net/littlewolf766/article/details/7329123

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

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

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

datetimebox 设置:

[javascript] view plain copy print ?

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 plain copy print ?

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 plain copy print ?

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:12
function 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 plain copy print ?

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

完成后效果：