是否可以在指令中使用angularjs内部'createDateParser'?

时间:2015-07-11 21:52:44

标签: angularjs angularjs-directive html5-input-date

Angular.js在内部使用createDateInputType来处理具有ngModel绑定的日期和时间特定输入元素。 在此createDateParser用于解析日期/时间。 例如:
input[date]的定义:

'date': createDateInputType('date', DATE_REGEXP,
    createDateParser(DATE_REGEXP, ['yyyy', 'MM', 'dd']),
    'yyyy-MM-dd'),

input[time]的定义:

'time': createDateInputType('time', TIME_REGEXP,
    createDateParser(TIME_REGEXP, ['HH', 'mm', 'ss', 'sss']),
   'HH:mm:ss.sss'),

基本上可以在源中更改使用的日期和时间格式。 但是没有api / option来指定其他格式。 (我认为这非常适合ngModelOptions)

现在我只想用指令扩展原始行为并添加一个使用用户指定格式字符串的解析器/格式化程序。为此我需要类似createDateParser的类似功能 - 所以可以在指令中使用这些内部函数吗?

替代解决方案是将moment.js包括为解析/格式化库。

我设置了一个Plunker来证明这一点 - 使用moment.js - 但如果功能在核心的某个地方,最好不要包含外部库... (该指令仅在浏览器本身不支持日期或时间时才会激活)

我只是在array.unshift()的第一个位置添加一个解析器和一个格式化程序,因此格式化程序最后会调用它。对于解析器,它将首先被调用 格式化程序只是将angular / iso格式的字符串转换回日期对象,并根据用户给定的formatString对其进行格式化。

ctrl.$formatters.unshift(function(value) {
    if (value) {
        var tempDate = moment(value, format_internal);
        var intDateFormatedString = tempDate.format(scope.formatString);
        return intDateFormatedString;
    }
});

Parser只在另一个方向上进行相同的工作并进行一些验证。

ctrl.$parsers.unshift(function(viewValue) {
    var resultString;
    if (viewValue) {
        // momentjs with strict parsing
        var tempDate = moment(viewValue, scope.formatString, true);
        if ( tempDate.isValid() ) {
            ctrl.$setValidity("userInput", true);
             // return as string with internal angular expected format
            resultString = tempDate.format(format_internal);
        }
    }
    return resultString;
});

仅部分相关:

How to manually rerun formatter chain in angularjs directive with ngModel?

希望'问题'的风格还可以 - 我不确定我是否找到了正确的焦点.. 最终以某种方式拆分它会更好吗?

0 个答案:

没有答案