Javascript Girl
  1. Javascript Girl
  3. Autoriser Moment.js dates dans bootstrap-ui datepicker
Intereting Posts
Comment lire et enregistrer des pièces jointes à l'aide de node-imap La validation des entrées radio renvoie une erreur Basculer les couches KML dans Google Maps v3 Le diagramme à barres dc.js avec l'échelle ordinaire d'axe x ne fonctionne pas correctement Comment interroger la base de données en utilisant javascript? Modification de la couleur de l'image SVG avec javascript Dates GMT vs UTC Preg_match_all JS équivalent? LocalStorage comme alternative de stockage pour HTA Détecter les modifications dans les objets à l'intérieur du tableau dans Angular2 L'UI-Router angulaire passant des données entre les états avec la fonction go ne fonctionne pas Comment puis-je obtenir des valeurs de chaîne de requête en JavaScript? Est-il possible de faire glisser et déposer de / vers une applet Flash avec JavaScript? Comment utiliser le fichier json dans le code html Noms de contrôle dans un validateur personnalisé Validation côté client .NET

Autoriser Moment.js dates dans bootstrap-ui datepicker

J'essaie d'utiliser Bootstrap UI's DatePicker avec Moment.js dates.

Il est possible si je convertissez ma valeur de modèle de Moment.js date à Date standard avant de l'affecter à une portée: 

 $scope.myDate = moment('2014-11-07T21:20:15').toDate();

Cependant, j'aimerais qu'il soit aussi transparent que possible, c'est-à-dire sans avoir besoin d'une conversion préalable manuelle.

J'ai essayé d'ajouter des formateurs et des analyseurs d'emballage par extension de directive, mais ça ne fonctionne pas comme j'attends: 

 angular .module('DatepickerWorkaround', []) .directive('datepickerPopup', function () { return { restrict: 'EAC', require: 'ngModel', priority: -10, link: function ($scope, element, attrs, ngModel) { // Remove the default formatter from the input directive to prevent conflict. // This is required for compatibility with AngularJS 1.3.x. ngModel.$formatters.shift(); // Casting Moment.js date to standard date. ngModel.$formatters.unshift(function(momentDate) { if (moment.isMoment(momentDate)) { return momentDate.toDate(); } }); // Casting standard date back to Moment.js date. ngModel.$parsers.push(function(date) { if (date instanceof Date) { return moment(date); } }); } } }) ;

Cette date d'extension s'affiche correctement dans le champ de saisie, mais lorsque la fenêtre contextuelle s'ouvre, la date incorrecte est sélectionnée à l'intérieur de celle-ci.

En outre, je ne suis pas sûr de la valeur que je dois utiliser pour la propriété de priority directive et sur quelles méthodes puis-je appeler $formatters et $parsers , c'est-à-dire push() vs unshift() .

Existe-t-il un moyen de faire fonctionner le DatePicker de Bootstrap UI avec les dates Moment.js de manière transparente?

Décorant les directives datepickerPopup et datepicker originales, il est possible d'effectuer cette conversion.

Dans ce plunker, j'ai changé les méthodes suivantes:

  • ngModel.$render on datepickerPopup ;
  • parseDate sur datepickerPopup ;
  • MinDate et maxDate $watch es on datepicker ;
  • this.render on datepicker ;
  • this.refreshView on datepicker ;
  • this.createDateObject sur datepicker ;
  • $scope.select on datepicker ;

Avec moment.utc () et je suis plutôt satisfait des résultats. Dites-moi si cela marche pour vous.

Je n'ai pas testé ceci, mais vous pourriez le faire.

Créez un filtre client qui renvoie la date normale … quelque chose comme ci-dessous 

 angular.module('phonecatFilters', []).filter('momentToDate', function() { return function(momentDate) { if (moment.isMoment(momentDate)) { return momentDate.toDate(); }else { return momentDate } }; });

Ensuite, où vous déclarez directive ng-model="yourmomentdate | momentToDate"