Angular引导dateselect器date格式不会格式化ng模型值

我在我的angular度应用程序中使用引导dateselect器。 然而，当我从该dateselect一个date – select器基础ng模型，我有绑定获取更新我想要在一个date格式“MM / dd / yyyy”ng模型。 但是它每次都是这样的date 

"2009-02-03T18:30:00.000Z"

代替 

 02/04/2009

我为同一个plunkr链接创build了一个plunkr

我的Html和控制器代码如下所示 

 <!doctype html> <html ng-app="plunker"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="DatepickerDemoCtrl"> <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre> <p>above filter will just update above UI but I want to update actual ng-modle</p> <h4>Popup</h4> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"> <i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> </div> <!--<div class="row"> <div class="col-md-6"> <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select> </div> </div>--> <hr /> {{dt}} </div> </body> </html>

angular度控制器 

 angular.module('plunker', ['ui.bootstrap']); var DatepickerDemoCtrl = function ($scope) { $scope.open = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = true; }; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.format = 'dd-MMMM-yyyy'; };

提前感谢审查我的问题。

UPDATE

我在下面调用发布我的数据的方法，VAR是包含dateselect器variables的大小为900的数组。 

 public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) { var query = this.EntityQuery.from('SaveFormData').withParameters({ $method: 'POST', $encoding: 'JSON', $data: { VAR: formToSave.VAR, X: formToSave.X, CurrentForm: formToSave.currentForm, } }); var deferred = this.q.defer(); this.manager.executeQuery(query).then((response) => { deferred.resolve(response); }, (error) => { deferred.reject(error); }); return deferred.promise; }

虽然已经发布了类似的答案，但是我想提供一些对我来说最简单，最清洁的解决scheme。 假设您正在使用AngularUI datepicker ，并且ng-Model的初始值没有被格式化，只需将以下指令添加到项目中即可解决问题： 

 angular.module('yourAppName') .directive('datepickerPopup', function (){ return { restrict: 'EAC', require: 'ngModel', link: function(scope, element, attr, controller) { //remove the default formatter from the input directive to prevent conflict controller.$formatters.shift(); } } });

我在Github AngularUI问题中find了这个解决scheme，因此所有功劳都归功于那里的人们。

你可以使用$parsing器如下所示，这为我解决了它。 

 window.module.directive('myDate', function(dateFilter) { return { restrict: 'EAC', require: '?ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$parsers.push(function(viewValue) { return dateFilter(viewValue,'yyyy-MM-dd'); }); } }; });

HTML： 

 <p class="input-group datepicker" > <input type="text" class="form-control" name="name" datepicker-popup="yyyy-MM-dd" date-type="string" show-weeks="false" ng-model="data[$parent.editable.name]" is-open="$parent.opened" min-date="minDate" close-text="Close" ng-required="{{editable.mandatory}}" show-button-bar="false" close-on-date-selection="false" my-date /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="openDatePicker($event)"> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </p>

我遇到了同样的问题，经过几个小时的logging和调查，我修好了。

事实certificate，第一次在dateselect器中设置值，$ viewValue是一个string，所以dateFilter显示它。 我所做的就是把它parsing成一个Date对象。

在ui-bootstrap-tpls文件中search该块 

  ngModel.$render = function() { var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : ''; element.val(date); updateCalendar(); };

并用下列代替： 

  ngModel.$render = function() { ngModel.$viewValue = new Date(ngModel.$viewValue); var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : ''; element.val(date); updateCalendar(); };

希望这会帮助:)

通过datepicker-popup指定的格式只是显示date的格式 。 底层的ngModel是一个Date对象。 试图显示它会显示它，因为它是默认的，符合标准的rapresentation。

您可以通过在视图中使用datefilter来显示它，或者如果需要在控制器中parsingdatefilter，则可以在控制器中注入$filter并将其称为$filter('date')(date, format) 。 另请参阅datefilter文档 。

你可以在你的datepicker指令中选取值之后使用格式化程序。 例如 

 angular.module('foo').directive('bar', function() { return { require: '?ngModel', link: function(scope, elem, attrs, ctrl) { if (!ctrl) return; ctrl.$formatters.push(function(value) { if (value) { // format and return date here } return undefined; }); } }; });

LINK 。

有这么多的答案已经写了，这是我的意见。

使用Angular 1.5.6和ui-bootstrap 1.3.3，只需将它添加到模型中即可完成。 

 ng-model-options="{timezone: 'UTC'}"

注意 ：只有当您担心date落后1天时才使用此function，并且不会有额外的T00：00：00.000Z时间

更新Plunkr在这里：

http://plnkr.co/edit/nncmB5EHEUkZJXRwz5QI?p=preview

所有提出的解决scheme都不适合我，但最接近的是来自@Rishii。

我正在使用AngularJS 1.4.4和UI Bootstrap 0.13.3。 

 .directive('jsr310Compatible', ['dateFilter', 'dateParser', function(dateFilter, dateParser) { return { restrict: 'EAC', require: 'ngModel', priority: 1, link: function(scope, element, attrs, ngModel) { var dateFormat = 'yyyy-MM-dd'; ngModel.$parsers.push(function(viewValue) { return dateFilter(viewValue, dateFormat); }); ngModel.$validators.date = function (modelValue, viewValue) { var value = modelValue || viewValue; if (!attrs.ngRequired && !value) { return true; } if (angular.isNumber(value)) { value = new Date(value); } if (!value) { return true; } else if (angular.isDate(value) && !isNaN(value)) { return true; } else if (angular.isString(value)) { var date = dateParser.parse(value, dateFormat); return !isNaN(date); } else { return false; } }; } }; }])

我可以在我的JSP文件中添加下面的代码来解决这个问题。 现在，模型和UI值都是相同的。 

 <div ng-show="false"> {{dt = (dt | date:'dd-MMMM-yyyy') }} </div>

步骤来更改ng模型的默认date格式

对于不同的date格式，在这里检查jqueryui的datepickerdate格式值，例如我用dd / mm / yy

创buildangularjs指令 

 angular.module('app', ['ui.bootstrap']).directive('dt', function () { return { restrict: 'EAC', require: 'ngModel', link: function (scope, element, attr, ngModel) { ngModel.$parsers.push(function (viewValue) { return dateFilter(viewValue, 'dd/mm/yy'); }); } } });

写dateFilter函数 

 function dateFilter(val,format) { return $.datepicker.formatDate(format,val); }

在html页面中写入ng-modal属性 

 <input type="text" class="form-control" date-type="string" uib-datepicker-popup="{{format}}" ng-model="src.pTO_DATE" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-button-bar="false" show-weeks="false" dt />

最后，我得到了很好的解决上述问题。 angular度带具有完全相同的function，我期待。 只是通过应用date-format="MM/dd/yyyy" date-type="string"我得到了预期的行为更新ng-model在给定的格式。 

 <div class="bs-example" style="padding-bottom: 24px;" append-source> <form name="datepickerForm" class="form-inline" role="form"> <!-- Basic example --> <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}"> <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label> <input type="text" autoclose="true" class="form-control" ng-model="selectedDate" name="date" date-format="MM/dd/yyyy" date-type="string" bs-datepicker> </div> <hr> {{selectedDate}} </form> </div>

这里是工作plunk 链接

定义一个新的指令来解决bug是不是很理想。

由于datepicker正确地显示datedate，一个简单的解决方法可能只是将模型variables先设置为null，然后再设置为当前date： 

 $scope.dt = null; $timeout( function(){ $scope.dt = new Date(); },100);

datepicker（和datepicker-popup）指令要求ng模型是一个Date对象。 这是在这里logging 。

如果你想ng-model是一个特定格式的string，你应该创build一个包装指令。 这是一个例子（ Plunker ）： 

 (function () { 'use strict'; angular .module('myExample', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']) .controller('MyController', MyController) .directive('myDatepicker', myDatepickerDirective); MyController.$inject = ['$scope']; function MyController ($scope) { $scope.dateFormat = 'dd MMMM yyyy'; $scope.myDate = '30 Jun 2017'; } myDatepickerDirective.$inject = ['uibDateParser', '$filter']; function myDatepickerDirective (uibDateParser, $filter) { return { restrict: 'E', scope: { name: '@', dateFormat: '@', ngModel: '=' }, required: 'ngModel', link: function (scope) { var isString = angular.isString(scope.ngModel) && scope.dateFormat; if (isString) { scope.internalModel = uibDateParser.parse(scope.ngModel, scope.dateFormat); } else { scope.internalModel = scope.ngModel; } scope.open = function (event) { event.preventDefault(); event.stopPropagation(); scope.isOpen = true; }; scope.change = function () { if (isString) { scope.ngModel = $filter('date')(scope.internalModel, scope.dateFormat); } else { scope.ngModel = scope.internalModel; } }; }, template: [ '<div class="input-group">', '<input type="text" readonly="true" style="background:#fff" name="{{name}}" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="internalModel" is-open="isOpen" ng-click="open($event)" ng-change="change()">', '<span class="input-group-btn">', '<button class="btn btn-default" ng-click="open($event)">&nbsp;<i class="glyphicon glyphicon-calendar"></i>&nbsp;</button>', '</span>', '</div>' ].join('') } } })(); 
 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-app="myExample"> <div ng-controller="MyController"> <p> Date format: {{dateFormat}} </p> <p> Value: {{myDate}} </p> <p> <my-datepicker ng-model="myDate" date-format="{{dateFormat}}"></my-datepicker> </p> </div> </body> </html>
    Interesting Posts

    Angularjs：当ng-model更新时select不更新

    如何使用angular JS设置下拉列表控件的选定选项

    ng-model和ng-bind有什么不同？

    在SELECT中的AngularJs – ng-model

    ngModel格式器和parsing器

    AngularJS：使用jQuery更改ng-model绑定时不会更新

    我怎样才能让angularjs ngChange处理程序只有当用户input完成时才被调用