1

我有一个input标签type="time"如下

<input type='time' id='from' ng-model='data.hall.occupancy.timeRange.from' datify value="{{data.hall.occupancy.timeRange.from | propertime}}"/>

过滤器和指令如下

 app.directive('datify',function(){
return {
    require:'ngModel',
    link:function(scope,element,attrs,modelCtrl){
        modelCtrl.$parsers.push(function(inputValue){
            var times = inputValue.split(":");
            var hours = times[0];
            var mins = times[1];
            var currentDate = new Date();
            var outputDate = new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate(),hours,mins);
            return outputDate.toString();
        });
    }
};
});

app.filter('propertime',function(){
return function(timeStamp){
    if(timeStamp){
        var dateObj = new Date(timeStamp.toString());
        var date = dateObj.getDate();
        var month = dateObj.getMonth()+1;
        var year = dateObj.getFullYear();
        var hours = (0+ dateObj.getHours().toString()).slice(-2);
        var minutes = (0+ dateObj.getMinutes().toString()).slice(-2);
        return hours+":"+minutes;//+" "+date+"/"+month+"/"+year;
    }
}
});

链接到我的 plnkr：http ://plnkr.co/edit/G4G5V62Y70IBvXUXdvQT?p=preview

tag的value属性input在 DOM 中正确更新，但不影响 UI。然而，更新 UI 中的时间会更新valueDOM 中的属性。谁能告诉我这里发生了什么。

注意：我使用的是 Chrome（Firefox 将 input type="time" 显示为普通文本输入）

4

2 回答 2

2

我们正在尝试创建一个需要与另一个指令交互的指令/组件（ng-model在这种情况下）。

所以我们写了require: 'ngModel',

在我们解析输入之后$parse(attrs.datify);

HTML

<input 
       type='time'
       id='from' 
        datify='data.hall.occupancy.timeRange.from' 
        ng-model='data.hall.occupancy.timeRange.from'
        value="{{data.hall.occupancy.timeRange.from | propertime}}"
 />

指示

   app.directive('datify', function ($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            var model = $parse(attrs.datify);

            scope.$watch(model, function (value) {
                if (value.toString().split(":").length == 2) {
                    backToDate(value)
                }
            }); // end watch

            function backToDate(value) {
                var times = value.split(":");
                var hours = times[0];
                var mins = times[1];
                var currentDate = new Date();
                var outputDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDay(), hours, mins);
                modelCtrl.$setViewValue(outputDate);
            }

            function validate(value) {
                console.log('into validate');
                var otherFieldValue = model(scope);
                //console.log('validate:', value, otherFieldValue);

                var times = value.toString().split(":");

                var hours = times[1];
                var mins = times[2].split(".")[0];
                var currentDate = new Date();

                var outputDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDay(), hours, mins);
                //console.log("the date:", outputDate.toString());
                modelCtrl.$setViewValue(outputDate);
                return outputDate;
            }

            modelCtrl.$formatters.push(validate);
        }
    };
});

固定演示Fiddle

于 2013-10-21T07:38:22.223 回答
0

我对角度一无所知，但 Chrome、Opera 和 iOS Safari 将支持日期/时间输入类型。http://caniuse.com/input-datetime

于 2014-05-13T13:20:16.663 回答