Il formato data bootprap angular di bootstrap non consente di formattare il valore del modello ng

Sto usando il data-picker di bootstrap nella mia applicazione angular. Tuttavia quando seleziono una data da quella data-picker sottostante al modello-ng che ho legato viene aggiornato Voglio quel modello-ng in un formato data ‘MM / gg / aaaa’. ma ogni volta fa appuntamenti come questo

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

invece di

 02/04/2009 

Ho creato un plunkr per lo stesso link plunkr

Il mio codice Html e controller è come sotto

          

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

Grazie in anticipo per la mia domanda.

AGGIORNARE

Sto chiamando in basso metodo per la pubblicazione dei miei dati e VAR è una matrice di dimensione 900 che contiene le variabili di selezione data.

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

Anche se sono state pubblicate risposte simili, vorrei contribuire con quella che mi è sembrata la soluzione più semplice e pulita. Supponendo che tu stia utilizzando il datapicker AngularUI e il tuo valore iniziale per il modello ng non viene formattato, semplicemente aggiungendo la seguente direttiva al tuo progetto verrà risolto il 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(); } } }); 

Ho trovato questa soluzione nei problemi di Github AngularUI e quindi tutto il merito va alle persone laggiù.

Puoi fare uso di parser $ come mostrato di seguito, questo lo ha risolto per me.

 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:

 

Mi sono imbattuto nello stesso problema e dopo un paio d’ore di registrazione e investigazione, l’ho risolto.

Si è scoperto che per la prima volta il valore è impostato in un selettore di date, $ viewValue è una stringa e quindi dateFilter lo visualizza così com’è. Tutto ciò che ho fatto è analizzarlo in un object Date.

Cerca quel blocco nel file ui-bootstrap-tpls

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

e sostituirlo con:

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

Speriamo che questo possa aiutare 🙂

Il format specificato tramite datepicker-popup è solo il formato per la data visualizzata . Il ngModel sottostante è un object Date. Cercando di visualizzarlo verrà mostrato come predefinito, rappresentazione standard conforms.

Puoi mostrarlo come vuoi usando il filtro date nella vista, o, se ne hai bisogno, nel controller, puoi iniettare $filter nel tuo controller e chiamarlo $filter('date')(date, format) . Vedi anche i documenti del filtro della data .

È ansible utilizzare i formattatori dopo aver selezionato il valore all’interno della direttiva datepicker. Per esempio

 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 .

Tutte le soluzioni proposte non hanno funzionato per me, ma quella più vicina era di @Rishii.

Sto usando AngularJS 1.4.4 e 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 così tante risposte già scritte, Ecco la mia versione.

Con Angular 1.5.6 e ui-bootstrap 1.3.3, basta aggiungere questo al modello e il gioco è fatto.

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

Nota : utilizzare questa opzione solo se si è preoccupati che la data sia trascorsa un giorno indietro e che non si sia preoccupato del tempo supplementare di T00: 00: 00.000Z

Aggiornato Plunkr qui:

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

Posso risolvere questo problema aggiungendo sotto il codice nel mio file JSP. Ora entrambi i valori del modello e dell’interfaccia utente sono uguali.

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

Passos per modificare il formato data predefinito di ng-model

Per i diversi formati di data controlla qui i valori del formato della data di jqueryui datepicker, ad esempio ho usato gg / mm / aa

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

Scrivi data Funzione filtro

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

Nella pagina html scrivi l’attributo mod-ng

  

Finalmente ho trovato un’ottima soluzione al problema di cui sopra. la cinghia angular ha esattamente la stessa caratteristica che mi aspetto. Semplicemente applicando date-format="MM/dd/yyyy" date-type="string" ho avuto il mio comportamento previsto di aggiornare il modello ng nel formato dato.

 

{{selectedDate}}

qui sta lavorando il link plunk

Definire una nuova direttiva per aggirare un bug non è davvero l’ideale.

Poiché datepicker visualizza le date successive correttamente, una soluzione semplice potrebbe essere semplicemente impostare prima la variabile del modello su null e poi sulla data corrente dopo un po ‘:

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

La direttiva datepicker (e datepicker-popup) richiede che il modello ng sia un object Date. Questo è documentato qui .

Se vuoi che ng-model sia una stringa in un formato specifico, dovresti creare una direttiva wrapper. Ecco un esempio ( 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}}

Dopo aver controllato le risposte di cui sopra, ho trovato questo e ha funzionato perfettamente, senza dover aggiungere un attributo extra al tuo markup

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