[英]Input type=“time” binding of value attribute doesn't update the UI with angular
I have an input
tag of type="time"
as below 我有一个type="time"
的input
标签,如下所示
<input type='time' id='from' ng-model='data.hall.occupancy.timeRange.from' datify value="{{data.hall.occupancy.timeRange.from | propertime}}"/>
the filter and directive are as follows 过滤器和指令如下
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;
}
}
});
Link to my plnkr : http://plnkr.co/edit/G4G5V62Y70IBvXUXdvQT?p=preview 链接到我的plnkr: http ://plnkr.co/edit/G4G5V62Y70IBvXUXdvQT?p=preview
The value
attribute of input
tag is updated in DOM correctly, but doesn't affect the UI. input
标记的value
属性在DOM中已正确更新,但不影响UI。 However updating the time in the UI, updates the value
attribute in the DOM. 但是,更新UI中的时间会更新DOM中的value
属性。 Can someone tell me what is happening here. 有人可以告诉我这里发生了什么。
Note: I am using Chrome (Firefox shows input type="time" as a normal text input) 注意:我使用的是Chrome(Firefox将输入type =“ time”显示为常规文本输入)
We're trying to create a directive/component that needs to interact with another directive ( ng-model
in this case). 我们正在尝试创建需要与另一个指令(本例中为ng-model
)交互的指令/组件。
So we wrote require: 'ngModel',
所以我们写了require: 'ngModel',
After we parse input $parse(attrs.datify);
解析输入后, $parse(attrs.datify);
HTML 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}}"
/>
Directive 指示
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);
}
};
});
I don't know anything about angular, but Date/time input type will be supported in Chrome, Opera and iOS Safari. 我对角度一无所知,但Chrome,Opera和iOS Safari将支持日期/时间输入类型。 http://caniuse.com/input-datetime http://caniuse.com/input-datetime
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.