El formato de fecha del marcador de fecha de inicialización angular no formatea el valor de ng-model

Estoy usando el selector de fecha bootstrap en mi aplicación angular. Sin embargo, cuando selecciono una fecha de ese ng-model subyacente al datepicker que tengo bind se actualiza, quiero ese ng-model en un formato de fecha ‘MM / dd / aaaa’. pero siempre hace una fecha como esta

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

en lugar de

 02/04/2009 

Creé un plunkr para el mismo enlace plunkr

Mi código HTML y controlador es como a continuación

          
Selected date is: {{dt | date:'MM/dd/yyyy' }}

above filter will just update above UI but I want to update actual ng-modle

Popup

<!--

-->


{{dt}}

Controlador 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'; }; 

Gracias de antemano por revisar mi pregunta.

ACTUALIZAR

Estoy llamando al método siguiente para publicar mis datos y VAR es una matriz de tamaño 900 que contiene variables de selector de fecha.

 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; } 

Aunque se han publicado respuestas similares, me gustaría contribuir con lo que parecía ser la solución más sencilla y limpia para mí. Suponiendo que está utilizando el selector de fecha AngularUI y su valor inicial para el ng-Model no se formatea simplemente al agregar la siguiente directiva a su proyecto se solucionará el problema:

 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(); } } }); 

Encontré esta solución en los problemas de Github AngularUI y, por lo tanto, todo el mérito recae en la gente de allí.

Puede usar $ parsers como se muestra a continuación, esto lo resolvió para mí.

 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:

 

Me encontré con el mismo problema y después de un par de horas de iniciar sesión e investigar, lo arreglé.

Resultó que, por primera vez, el valor se establece en un selector de fecha, $ viewValue es una cadena, por lo que dateFilter lo muestra tal como está. Todo lo que hice fue analizarlo en un objeto Date.

Busque ese bloque en el archivo ui-bootstrap-tpls

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

y reemplazarlo por:

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

Espero que esto ayude 🙂

El format especificado a través de datepicker-popup es solo el formato para la fecha mostrada . El ngModel subyacente es un objeto Date. Tratar de mostrarlo lo mostrará como su representación estándar, que cumple con los estándares.

Puede mostrarlo como desee utilizando el filtro de date en la vista o, si necesita que se analice en el controlador, puede inyectar $filter en su controlador y llamarlo como $filter('date')(date, format) . Ver también los documentos de filtro de fecha .

Puede usar formateadores después de elegir el valor dentro de su directiva datepicker. Por ejemplo

 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; }); } }; }); 

ENLACE .

Todas las soluciones propuestas no funcionaron para mí, pero la más cercana fue de @Rishii.

Estoy usando AngularJS 1.4.4 y 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; } }; } }; }]) 

Con tantas respuestas ya escritas, esta es mi opinión.

Con Angular 1.5.6 y ui-bootstrap 1.3.3, solo agregue esto en el modelo y listo.

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

Nota : Úselo solo si le preocupa que la fecha sea de 1 día de retraso y no le moleste el tiempo adicional de T00: 00: 00.000Z

Actualización de Plunkr aquí:

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

Puedo solucionar esto agregando el código siguiente en mi archivo JSP. Ahora, tanto el modelo como los valores de UI son iguales.

 
{{dt = (dt | date:'dd-MMMM-yyyy') }}

Pasos para cambiar el formato de fecha predeterminado de ng-model

Para diferentes formatos de fecha, compruebe los valores de formato de fecha jqueryui datepicker aquí, por ejemplo, he usado dd / mm / aa

Crear la directiva angularjs

 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'); }); } } }); 

Escribir la función dateFilter

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

En la página html escribe el atributo ng-modal

  

Finalmente obtuve una gran solución para el problema anterior. correa angular tiene exactamente la misma característica que estoy esperando. Simplemente aplicando date-format="MM/dd/yyyy" date-type="string" obtuve el comportamiento esperado de actualizar ng-model en un formato dado.

 

{{selectedDate}}

aquí está trabajando plunk link

Definir una nueva directiva para evitar un error no es realmente ideal.

Debido a que el marcador de fecha muestra las fechas posteriores correctamente, una solución simple podría ser simplemente establecer primero la variable del modelo como nula, y luego a la fecha actual después de un tiempo:

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

La directiva datepicker (y datepicker-popup) requiere que el modelo ng sea un objeto Date. Esto está documentado aquí .

Si desea que ng-model sea una cadena en formato específico, debe crear una directiva de contenedor. Aquí hay un ejemplo ( 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: [ '
', '', '', '', '', '
' ].join('') } } })();
            

Date format: {{dateFormat}}

Value: {{myDate}}

Después de comprobar las respuestas anteriores, se me ocurrió esto y funcionó perfectamente sin tener que agregar un atributo adicional a su marcado

 angular.module('app').directive('datepickerPopup', function(dateFilter) { return { restrict: 'EAC', require: 'ngModel', link: function(scope, element, attr, ngModel) { ngModel.$parsers.push(function(viewValue) { return dateFilter(viewValue, 'yyyy-MM-dd'); }); } } }); 
    Intereting Posts