Le format de date angular du bootstrap datepicker ne formate pas la valeur du ng-modèle

J’utilise un sélecteur de date bootstrap dans mon application angular. Toutefois, lorsque je sélectionne une date à partir de ce sélecteur de date sous-jacente au ng-model dont je souhaite que bind soit mis à jour, je souhaite que ce ng-model soit au format «MM / jj / aaaa». mais chaque fois il fait date comme ça

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

au lieu de

 02/04/2009 

J’ai créé un plunkr pour le même lien plunkr

Mon code HTML et contrôleur est comme ci-dessous

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

Contrôleur 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'; }; 

Merci d’avance pour revoir ma question.

METTRE À JOUR

J’appelle ci-dessous la méthode pour poster mes données et VAR est un tableau de taille 900 qui contient des variables de sélecteur de date.

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

Bien que des réponses similaires aient été postées, j’aimerais consortingbuer à ce qui me semblait le plus simple et le plus propre. En supposant que vous utilisez le datpicker AngularUI et que votre valeur initiale pour le ng-Model ne soit pas formatée, il suffit d’append la directive suivante à votre projet pour résoudre le problème:

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

J’ai trouvé cette solution dans les problèmes de Github AngularUI et par conséquent tout le crédit va aux gens là-bas.

Vous pouvez utiliser les parsers $ comme indiqué ci-dessous, cela a résolu le problème pour moi.

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

HTML:

 

J’ai rencontré le même problème et après quelques heures de connexion et d’enquête, j’ai résolu le problème.

Il s’est avéré que pour la première fois, la valeur est définie dans un sélecteur de date, $ viewValue est une chaîne de sorte que dateFilter l’affiche tel quel. Tout ce que j’ai fait, c’est l’parsingr dans un object Date.

Recherchez ce bloc dans le fichier ui-bootstrap-tpls

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

et le remplacer par:

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

Espérons que cela aidera 🙂

Le format spécifié par datepicker-popup n’est que le format de la date affichée . Le ngModel sous- ngModel est un object Date. Essayer de l’afficher le montrera comme la représentation par défaut conforme à la norme.

Vous pouvez le montrer comme vous le souhaitez en utilisant le filtre de date dans la vue, ou, si vous en avez besoin, dans le contrôleur, vous pouvez injecter $filter dans votre contrôleur et l’appeler $filter('date')(date, format) . Voir aussi les documents du filtre de date .

Vous pouvez utiliser des formateurs après avoir choisi la valeur dans votre directive datpicker. Par exemple

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

LIEN .

Toutes les solutions proposées ne fonctionnaient pas pour moi, mais la plus proche provenait de @Rishii.

J’utilise AngularJS 1.4.4 et UI Bootstrap 0.13.3.

 .directive('jsr310Compatible', ['dateFilter', 'dateParser', function(dateFilter, dateParser) { return { ressortingct: '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.isSsortingng(value)) { var date = dateParser.parse(value, dateFormat); return !isNaN(date); } else { return false; } }; } }; }]) 

Avec autant de réponses déjà écrites, voici ma prise.

Avec Angular 1.5.6 & ui-bootstrap 1.3.3, ajoutez simplement ceci sur le modèle et vous avez terminé.

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

Remarque : utilisez cette option uniquement si vous craignez que la date soit 1 jour en retard et ne soit pas dérangée par un délai supplémentaire de T00: 00: 00.000Z

Mise à jour de Plunkr ici:

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

Je peux résoudre ce problème en ajoutant le code ci-dessous dans mon fichier JSP. Maintenant, les valeurs du modèle et de l’interface utilisateur sont identiques.

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

Étapes pour changer le format de date par défaut de ng-model

Pour différents formats de date, vérifiez les valeurs de format de date jqueryui datepicker ici, par exemple, j’ai utilisé jj / mm / aa

Créer une directive angularjs

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

Écrire la fonction dateFilter

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

Dans la page html, écrivez l’atsortingbut ng-modal

  

Finalement, j’ai eu une excellente solution au problème ci-dessus. La sangle angular a exactement la même caractéristique que ce à quoi je m’attends. Juste en appliquant date-format="MM/dd/yyyy" date-type="ssortingng" j’ai eu le comportement attendu de la mise à jour de ng-model dans un format donné.

 

{{selectedDate}}

voici le lien plunk de travail

Définir une nouvelle directive pour contourner un bogue n’est pas vraiment idéal.

Le pointeur de date affichant correctement les dates ultérieures, une solution simple pourrait consister à définir d’abord la variable de modèle sur null, puis sur la date actuelle après quelques instants:

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

La directive datepicker (et datepicker-popup) exige que le ng-model soit un object Date. Ceci est documenté ici .

Si vous souhaitez que ng-model soit une chaîne dans un format spécifique, vous devez créer une directive wrapper. Voici un exemple ( Plunker ):

 (function () { 'use ssortingct'; 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 { ressortingct: 'E', scope: { name: '@', dateFormat: '@', ngModel: '=' }, required: 'ngModel', link: function (scope) { var isSsortingng = angular.isSsortingng(scope.ngModel) && scope.dateFormat; if (isSsortingng) { 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 (isSsortingng) { scope.ngModel = $filter('date')(scope.internalModel, scope.dateFormat); } else { scope.ngModel = scope.internalModel; } }; }, template: [ '
', '', '', '', '', '
' ].join('') } } })();
            

Date format: {{dateFormat}}

Value: {{myDate}}

Après avoir vérifié les réponses ci-dessus, je suis arrivé à ceci et cela a fonctionné parfaitement sans avoir à append un atsortingbut supplémentaire à votre balisage

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