如何使用ng-model格式化date？
我有一个input定义为
<input class="datepicker" type="text" ng-model="clientForm.birthDate" /> 哪个被装备在页面的其他地方显示：
<tr> <th>Birth Date</th> <td>{{client.birthDate|date:'mediumDate'}}</td> </tr>
当页面加载出生date格式很好，如Dec 22, 2009 。 然而，当我看看我的<input>里面，它显示为Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time) ，我猜是如何JS呈现Date对象作为string。
首先，我该如何告诉Angular将<input>的date显示为12/22/2009 ？ 我似乎无法在ng-model属性中应用|filters 。
其次，只要我编辑date，即使保持它的原始格式，我的其他文本（在<td> ）似乎不再应用|datefilter; 它突然改变格式以匹配input文本框的格式。 如何在每次模型更改时应用|datefilter？
相关问题：
- 如何获得我的指令只能在onchange上触发？
- 如何访问指令中的参数？
使用表单的自定义validationhttp://docs.angularjs.org/guide/forms演示： http : //plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview
指令使用formaters和分析器和MomentJS ）
angModule.directive('moDateInput', function ($window) { return { require:'^ngModel', restrict:'A', link:function (scope, elm, attrs, ctrl) { var moment = $window.moment; var dateFormat = attrs.moDateInput; attrs.$observe('moDateInput', function (newValue) { if (dateFormat == newValue || !ctrl.$modelValue) return; dateFormat = newValue; ctrl.$modelValue = new Date(ctrl.$setViewValue); }); ctrl.$formatters.unshift(function (modelValue) { if (!dateFormat || !modelValue) return ""; var retVal = moment(modelValue).format(dateFormat); return retVal; }); ctrl.$parsers.unshift(function (viewValue) { var date = moment(viewValue, dateFormat); return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : ""; }); } }; });
这里是非常方便的指令angulardate时间 。 你可以像这样使用它：
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">
它还为您的input添加掩码并执行validation。
我已经创build了一个简单的指令来使标准input[type="date"]表单元素与AngularJS〜1.2.16正常工作。
看这里： https ： //github.com/betsol/angular-input-date
这里是演示： http : //jsfiddle.net/F2LcY/1/
我正在使用jquery datepicker来selectdate。 我的指令读取date并将其转换为jsondate格式（以毫秒为单位）存储在ng-model数据中，同时显示格式化date.and反向如果ng-model具有jsondate（以毫秒为单位）我的格式化程序以jquery datepicker格式显示。
HTML代码：
<input type="text" jqdatepicker ng-model="course.launchDate" required readonly />
Angular Directive：
myModule.directive('jqdatepicker', function ($filter) { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { element.datepicker({ dateFormat: 'dd/mm/yy', onSelect: function (date) { var ar=date.split("/"); date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]); ngModelCtrl.$setViewValue(date.getTime()); scope.$apply(); } }); ngModelCtrl.$formatters.unshift(function(v) { return $filter('date')(v,'dd/MM/yyyy'); }); } }; });
既然你已经使用datepicker作为一个类，我假设你正在使用jquery datepicker或类似的东西。
有一种方法可以完成你所打算的，而不使用moment.js，纯粹只使用datepicker和angularjs指令。
我在这个小提琴中给出了一个例子
这里摘录的小提琴：
-
Datepicker具有不同的格式，并且angularjs格式不同，需要find适当的匹配，以便在控件中预先selectdate，并且在ng模型绑定时也将填充到input字段中。 下面的格式等同于AngularJS的
'mediumDate'格式。$(element).find(".datepicker") .datepicker({ dateFormat: 'M d, yy' }); -
dateinput指令需要有一个临时stringvariables来表示人类可读的dateforms。
-
刷新页面的不同部分应该通过事件发生，如
$broadcast和$on。 -
使用filter以人类可读forms表示date在ng模型中也是可能的，但也可以使用临时模型variables。
$scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');
我使用下面的指令，使我和大多数用户非常高兴！ 它使用时刻进行parsing和格式化。 它看起来有点像前面提到的SunnyShah。
angular.module('app.directives') .directive('appDatetime', function ($window) { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModel) { var moment = $window.moment; ngModel.$formatters.push(formatter); ngModel.$parsers.push(parser); element.on('change', function (e) { var element = e.target; element.value = formatter(ngModel.$modelValue); }); function parser(value) { var m = moment(value); var valid = m.isValid(); ngModel.$setValidity('datetime', valid); if (valid) return m.valueOf(); else return value; } function formatter(value) { var m = moment(value); var valid = m.isValid(); if (valid) return m.format("LLLL"); else return value; } } //link }; }); //appDatetime
在我的forms中，我使用它是这样的：
<label>begin: <input type="text" ng-model="doc.begin" app-datetime required /></label> <label>end: <input type="text" ng-model="doc.end" app-datetime required /></label>
这将绑定一个时间戳（1970年以来的毫秒）到doc.begin和doc.end 。
我更喜欢有服务器返回date没有修改，并有JavaScript做视图按摩。 我的API从SQL Server返回“MM / DD / YYYY hh：mm：ss”。
资源
angular.module('myApp').factory('myResource', function($resource) { return $resource('api/myRestEndpoint/', null, { 'GET': { method: 'GET' }, 'QUERY': { method: 'GET', isArray: true }, 'POST': { method: 'POST' }, 'PUT': { method: 'PUT' }, 'DELETE': { method: 'DELETE' } }); } );
调节器
var getHttpJson = function () { return myResource.GET().$promise.then( function (response) { if (response.myDateExample) { response.myDateExample = $filter('date')(new Date(response.myDateExample), 'M/d/yyyy'); }; $scope.myModel= response; }, function (response) { console.log(response.data); } ); };
myDatevalidation指令
angular.module('myApp').directive('myDate', function($window) { return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { var moment = $window.moment; var acceptableFormats = ['M/D/YYYY', 'MD-YYYY']; function isDate(value) { var m = moment(value, acceptableFormats, true); var isValid = m.isValid(); //console.log(value); //console.log(isValid); return isValid; }; ngModel.$parsers.push(function(value) { if (!value || value.length === 0) { return value; }; if (isDate(value)) { ngModel.$setValidity('myDate', true); } else { ngModel.$setValidity('myDate', false); } return value; }); } } } );
HTML
<div class="form-group"> <label for="myDateExample">My Date Example</label> <input id="myDateExample" name="myDateExample" class="form-control" required="" my-date maxlength="50" ng-model="myModel.myDateExample" type="text" /> <div ng-messages="myForm.myDateExample.$error" ng-if="myForm.$submitted || myForm.myDateExample.$touched" class="errors"> <div ng-messages-include="template/validation/messages.html"></div> </div> </div>
模板/确认/ messages.html
<div ng-message="required">Required Field</div> <div ng-message="number">Must be a number</div> <div ng-message="email">Must be a valid email address</div> <div ng-message="minlength">The data entered is too short</div> <div ng-message="maxlength">The data entered is too long</div> <div ng-message="myDate">Must be a valid date</div>
Angularjs ui bootstrap你可以使用angularjs ui bootstrap，它也提供了datevalidation
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepickeroptions="dateOptions" date-disabled="disabled(date, mode)" ng-required="true">
在控制器中可以指定任何格式你想显示date为datefilter
$ scope.formats = ['dd-MMMM-yyyy'，'yyyy / MM / dd'，'dd.MM.yyyy'，'shortDate'];
