如果您想使用初始值填充字段,则可以执行以下操作
//Controller:$scope.myDate = new Date('2014-03-08T00:00:00');//HTML:<input type="date" ng-init="model=(myDate | date:'yyyy-MM-dd')" ng-model="model" />但是,我强烈建议创建自定义日期字段指令。
定制输入字段指令具有以下优点:
- 模型与视图之间的双向绑定。例如,当您在输入字段中输入有效日期时,它将自动为模型分配一个javascript日期;当您指定有效的javascript日期作为模型时,它将自动在文本字段中设置其格式。
- 表单验证支持。输入无效日期时,可以设置$ error标志,该标志可以在视图绑定中使用(即显示错误消息)。设置错误标志还将设置
form.$valid
为false,以便您可以有条件地将表单提交到服务器。
实施自定义日期指令时,需要考虑三个基本事项:
- 一个解析器,将解析输入文本并返回模型(在这种情况下为javascript日期)。
- 用于格式化模型并将其显示在文本字段中的格式化程序。
- 设置一个可选的验证标志,该标志可以在UI中用于自定义表单验证。
日期指令:
myApp.directive('dateField', function($filter) { return { require: 'ngModel', link: function(scope, element, attrs, ngModelController) {ngModelController.$parsers.push(function(data) { //View -> Model var date = Date.parseExact(data,'yyyy-MM-dd'); // if the date field is not a valid date // then set a 'date' error flag by calling $setValidity ngModelController.$setValidity('date', date!=null); return date == null ? undefined : date;});ngModelController.$formatters.push(function(data) { //Model -> View return $filter('date')(data, "yyyy-MM-dd");});} }});注意:对于解析日期,此指令使用Date.js(外部库)。
CSS:
.error { color:red;}.error-border { border: solid 2px red;}HTML:
<form name="myForm"> <input ng- type="date" name="myDate" ng-model="myDate" date-field /> <span ng-show="myForm.myDate.$error.date" > Please enter a valid date!!! </span><br /> Raw Date: {{myDate}} <br /> Formatted Nicely: {{ myDate | date:'yyyy, MMMM dd'}} <br /> Is Valid Date? {{ !myForm.myDate.$error.date}} <br /> Is Form Valid? {{ myForm.$valid }}</form>控制器:
myApp.controller('ctrl', function($scope) { $scope.myDate = new Date('2014-03-08T00:00:00');});演示JS小提琴与Date.js
演示JS提琴与Moment.js



