Angular.js 和 HTML5 日期输入值——如何让 Firefox 在日期输入中显示可读的日期值? [英] Angular.js and HTML5 date input value -- how to get Firefox to show a readable date value in a date input?
问题描述
我有一个 HTML5 日期输入,我希望它的值默认设置为我模型中日期属性的值.我对格式不太挑剔,因为 Chrome 似乎根据我的语言环境为我决定了格式,但理想情况下格式应该是一致的 dd/MM/yyyy
.
.
Firefox 目前不支持 type="date"
,会将所有值转换为字符串.由于您(正确地)希望 date
成为真正的 Date
对象而不是字符串,我认为最好的选择是创建另一个变量,例如 dateString
,然后链接两个变量:
function MainCtrl($scope, dateFilter) {$scope.date = new Date();$scope.$watch('date', function (date){$scope.dateString = dateFilter(date, 'yyyy-MM-dd');});$scope.$watch('dateString', function (dateString){$scope.date = new Date(dateString);});}
实际结构仅用于演示目的.您最好创建自己的指令,尤其是为了:
- 允许除
yyyy-MM-dd
以外的格式, - 能够使用
NgModelController#$formatters代码>
和NgModelController#$parsers
而不是人工的dateString
变量(请参阅 文档 关于这个主题).
请注意,我使用了 yyyy-MM-dd
,因为它是 JavaScript Date
对象直接支持的格式.如果您想使用另一个,您必须 自己进行转换.
编辑
这里有一个方法来创建一个干净的指令:
myModule.directive('日期输入',功能(日期过滤器){返回 {要求:'ngModel',模板:'<input type="date"></input>',替换:真的,链接:函数(范围,榆树,属性,ngModelCtrl){ngModelCtrl.$formatters.unshift(function (modelValue) {返回日期过滤器(模型值,'yyyy-MM-dd');});ngModelCtrl.$parsers.unshift(function(viewValue) {返回新日期(视图值);});},};});
这是一个基本指令,还有很大的改进空间,例如:
- 允许使用自定义格式而不是
yyyy-MM-dd
, - 检查用户输入的日期是否正确.
I have an HTML5 date input and I would like its value to be set to the value of the date property in my model by default. I'm not too fussy about formatting since Chrome seems to decide that for me anyway based on my locale, but ideally the format would be consistently dd/MM/yyyy
.
This is how I set up my input:
<input type="date"
ng-model="date"
value="{{ date | date: 'yyyy-MM-dd' }}" />
This works fine on Chrome, and I see the following by default:
(I still don't quite understand why the value had to be given in yyyy-MM-dd
, if Chrome still formats it based on my locale, but that's a different question.)
My issue is with Firefox not showing the date's value in the way I've specified. I think this has to do with binding the input to the date
model, because I can specify pretty much any string in the value
attribute, and I will still see the long date string in the input by default:
If I remove ng-model="date"
from the input tag, Firefox nicely displays any value I give it. I didn't think the model that an input was bound to actually had any effect on its default value?
I understand the date input isn't supported universally, but seeing as it's supposed to fall back on a simple text input, I don't see why its value won't simply be 2013-08-05
, as specified by angular's date filter.
So, how do I get Firefox to accept my formatted value in the date input?
NOTE After the edits have been done by the user, I will of course perform validation and convert each date input value into a proper Date
object. Not sure if this is relevant to the question, but putting it out there just in case, because the input formats would obviously need to be consistent for the date conversion to work the same in all browsers. Problematic, of course, with Chrome deciding the input format for me...
The problem is that value
is ignored when ng-model
is present.
Firefox, which doesn't currently support type="date"
, will convert all the values to string. Since you (rightly) want date
to be a real Date
object and not a string, I think the best choice is to create another variable, for instance dateString
, and then link the two variables:
<input type="date" ng-model="dateString" />
function MainCtrl($scope, dateFilter) {
$scope.date = new Date();
$scope.$watch('date', function (date)
{
$scope.dateString = dateFilter(date, 'yyyy-MM-dd');
});
$scope.$watch('dateString', function (dateString)
{
$scope.date = new Date(dateString);
});
}
The actual structure is for demonstration purposes only. You'd be better off creating your own directive, especially in order to:
- allow formats other than
yyyy-MM-dd
, - be able to use
NgModelController#$formatters
andNgModelController#$parsers
rather than the artificaldateString
variable (see the documentation on this subject).
Please notice that I've used yyyy-MM-dd
, because it's a format directly supported by the JavaScript Date
object. In case you want to use another one, you must make the conversion yourself.
EDIT
Here is a way to make a clean directive:
myModule.directive(
'dateInput',
function(dateFilter) {
return {
require: 'ngModel',
template: '<input type="date"></input>',
replace: true,
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
return dateFilter(modelValue, 'yyyy-MM-dd');
});
ngModelCtrl.$parsers.unshift(function(viewValue) {
return new Date(viewValue);
});
},
};
});
That's a basic directive, there's still a lot of room for improvement, for example:
- allow the use of a custom format instead of
yyyy-MM-dd
, - check that the date typed by the user is correct.
这篇关于Angular.js 和 HTML5 日期输入值——如何让 Firefox 在日期输入中显示可读的日期值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!