我有一个type="time"
的input
标签,如下所示
<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
input
标记的 value
属性在 DOM 中正确更新,但不会影响 UI。但是,更新 UI 中的时间会更新 DOM 中的value
属性。有人可以告诉我这里发生了什么。
注意:我正在使用Chrome(Firefox显示输入类型="time"作为普通文本输入)
我们正在尝试创建一个需要与另一个指令交互的指令/组件(在本例中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);
}
};
});
固定演示小提琴
我对角度一无所知,但Chrome,Opera和iOS Safari将支持日期/时间输入类型。 http://caniuse.com/input-datetime