web-dev-qa-db-fra.com

angular-ui datepicker état initial de datepicker non formaté par datepicker-popup

Je travaille avec un datepicker angulaire-ui et tout fonctionne réellement bien, à l'exception de l'état initial du datepicker. Après avoir choisi une date, ça a l'air bien. Voir ci-dessous:

Etat initial

enter image description here

Après sélection d'une date dans le sélecteur

enter image description here

Donc, clairement, je reçois la version strigifiée de l'objet de date dans le premier cas, et le formaté après avoir sélectionné une date. 

Le balisage

<input type="text" class="form-control"
       id="birthday"
       datepicker-options="datePickerOptions"
       datepicker-popup="{{format}}"
       data-ng-model="birthday"
       data-is-open="opened"
       data-ng-required="true"
       data-close-text="Close"/>

<span class="input-group-btn">
    <button type="button"
            class="btn btn-default"
            data-ng-click="open($event)">
        <i class="fa fa-calendar"></i>
    </button>
</span>

Le controlle

var today = $scope.today = function today() {
    $scope.birthday = $scope.client.birthday || new Date();
};
today();

$scope.clear = function clear() {
    $scope.dt = null;
};

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.format = 'MMM d, yyyy';
$scope.datePickerOptions = {
    'show-weeks': false
};

Ce n’est pas très grave, mais ce serait vraiment bien si le modèle (qui doit être un objet de date selon la documentation) était formaté conformément au $scope.format pour commencer, plutôt qu’un objet de date strigifié. Aussi, pas sûr que cela fasse une différence, mais ce sélecteur de date est à l'intérieur d'un modal. Merci pour toute aide!

METTRE &AGRAVE; JOUR

On dirait que je ne suis pas le seul à en faire l'expérience, et c'est lié à l'utilisation de la forme angulaire 1.3. https://github.com/angular-ui/bootstrap/issues/2659

angularjsdatepickerangular-ui-bootstrap
18
Greg

Où et où que ce soit, les solutions que j'ai trouvées sont longues, manipulées par directive, etc. Je préfère donc cette solution courte.

birthday = $filter('date')(new Date(), "MMM dd, yyyy");

Remarque: N'oubliez pas d'injecter le service angulaire $ filtre intégré dans le contrôleur 

angular.module('app').controller("yourController", 
['$filter' function($filter){ 
       /* your code here */  

       birthday = $filter('date')(new Date(), "MMM dd, yyyy");

       /* your code here */ 
}]);

J'espère que cela t'aides.

4
Premchandra Singh

J'ai eu un problème similaire, il semble que l'interface utilisateur de bootstrap soit incompatible avec la version AngularJS 1.3.x.

Ce plunkr résout le problème pour moi http://plnkr.co/edit/L9u12BeeBgPC2z0nlrLZ?p=preview

// this is the important bit:
.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();
    }
  }
});

Voir également le billet Github https://github.com/angular-ui/bootstrap/issues/2659#issuecomment-60750976

3
ch4nd4n

Pour améliorer la réponse de Premchandra Singh, l'utilisation du service $ filter angulaire fonctionne, mais vous devez également ajouter une montre à votre champ de date pour appliquer le filtre aux mises à jour futures:

$scope.myDate = $filter('date')(new Date(), 'dd.MM.yy');
$scope.$watch('myDate', function (newValue, oldValue) {
    $scope.myDate = $filter('date')(newValue, 'dd.MM.yy');
});
1
csharpsql

Une autre solution qui a fonctionné pour moi, outre celle décrite dans le numéro de github, consiste à initialiser le modèle avec le temps Epoch en millisecondes plutôt qu’un objet date, par exemple:

$scope.dt = new Date().getTime();
0
Andreas Ågren