JQuery easyUI datetimebox 自定义显示格式

最新推荐文章于 2019-05-10 16:36:04 发布

转载最新推荐文章于 2019-05-10 16:36:04 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/junn/blog/148661

文章标签：

#javascript #ViewUI

为什么80%的码农都做不了架构师？>>>

项目里需要显示自定义显示格式，比如只显示yyy,yyyy-mm,yyyy-mm-dd等格式。直接设置formatter参数的话，总是报错。用firefox调试后发现，好像在设置新的日期时datetimebox控件会调用默认的parser指定的函数，把字符串转为日期格式。由于默认的只认"yyyy-MM-dd hh:mm:ss"格式(可以是其它分隔符,并非一定要是'-'),所以如果formatter函数返回的不是这个格式,会报错。

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

datetimebox 设置:

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

//格式化显示的文本  
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’

//把时间格式字符串转化为时间  
//如下格式  
//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]);  
}

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

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

完成后效果：