dijit.form.DateTextBox日期自动转化的解决方法

最近做一项目,要求dijit.form.DateTextBox输入4位数字、6位数字和8位数字时自动转化为日期,而不是出现格式不正确的消息。

调查了一下,可以用下面的代码来解决。

如下代码:

JavaScript
dojo.declare("net.yutuo.dojo.DateTextBox", [dijit.form.DateTextBox], {
    validator: function(value, constraints) {
        value = this.myParse(value, constraints);
        return (new RegExp("^(?:" + this.regExpGen(constraints) + ")"+(this.required?"":"?")+"$")).test(value)
                && (!this.required || !this._isEmpty(value))
                && (this._isEmpty(value) || this.parse(value, constraints) !== undefined);
    },
    parse: function(value, constraints){
        value = this.myParse(value, constraints);
        return this.dateLocaleModule.parse(value, constraints)
                || (this._isEmpty(value) ? null : undefined);
    },
    myParse: function (value, constraints) {
        var dateStr = null;
        if (value.match(/^d{6}$/)) {
            dateStr = value.substring(0, 2) + '-' + value.substring(2, 4) + '-' + value.substring(4, 6);
        } else if (value.match(/^d{8}$/)) {
            dateStr = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 8);
        } else if (value.match(/^d{4}$/)) {
            dateStr = new Date().getFullYear() + '-' + value.substring(0, 2) + '-' + value.substring(2, 4);
        }
        if (dateStr) {
            var date = this.dateLocaleModule.parse(dateStr, {selector: 'date', datePattern: 'yy-M-d'});
            if (date) {
                return this.dateLocaleModule.format(date, constraints);
            }
        }
        return value;
    }
});

测试代码如下

HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" djConfig="parseOnLoad: true"
    src="js/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css"
    href="js/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
    href="js/dijit/themes/claro/claro.css" />

<title>Dojo Test</title>

<script type="text/javascript">
    dojo.require("dijit.form.DateTextBox");

    dojo.declare("net.yutuo.dojo.DateTextBox", [dijit.form.DateTextBox], {
        validator: function(value, constraints) {
            value = this.myParse(value, constraints);
            return (new RegExp("^(?:" + this.regExpGen(constraints) + ")"+(this.required?"":"?")+"$")).test(value)
                    && (!this.required || !this._isEmpty(value))
                    && (this._isEmpty(value) || this.parse(value, constraints) !== undefined);
        },
        parse: function(value, constraints){
            value = this.myParse(value, constraints);
            return this.dateLocaleModule.parse(value, constraints)
                    || (this._isEmpty(value) ? null : undefined);
        },
        myParse: function (value, constraints) {
            var dateStr = null;
            if (value.match(/^d{6}$/)) {
                dateStr = value.substring(0, 2) + '-' + value.substring(2, 4) + '-' + value.substring(4, 6);
            } else if (value.match(/^d{8}$/)) {
                dateStr = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 8);
            } else if (value.match(/^d{4}$/)) {
                dateStr = new Date().getFullYear() + '-' + value.substring(0, 2) + '-' + value.substring(2, 4);
            }
            if (dateStr) {
                var date = this.dateLocaleModule.parse(dateStr, {selector: 'date', datePattern: 'yy-M-d'});
                if (date) {
                    return this.dateLocaleModule.format(date, constraints);
                }
            }
            return value;
        }
    });

</script>
</head>

<body class="claro">
    Old:<br/>
    <input type="text" data-dojo-type="dijit.form.DateTextBox"/>

    <br/>
    New:    <br/>
    <input type="text" data-dojo-type="net.yutuo.dojo.DateTextBox"/>
</body>

</html>

转载请注明:宇托的狗窝 » dijit.form.DateTextBox日期自动转化的解决方法

发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址