AngularJS 1.3 - Il formato iniziale di Datepicker non è corretto

Ho iniziato a utilizzare AngularJS 1.3 ieri e un problema che ho riscontrato è che la data iniziale in Datepicker non è nel formato definito. Il formato della data è corretto dopo scegliendo una data.AngularJS 1.3 - Il formato iniziale di Datepicker non è corretto

Il formato iniziale è corretto con AngularJS 1.2.10 come si può vedere nell'esempio commentando il tag dello script.

Come posso impostare il formato iniziale corretto?

Plunker example

HTML

<!doctype html> 
<html ng-app="plunker"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script> 
    <!-- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> --> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

    <br> 
    <br> 
    <div ng-controller="DatepickerDemoCtrl"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <p class="input-group"> 
       <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
       <span class="input-group-btn"> 
       <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
       </span> 
      </p> 
     </div> 
    </div> 
    </div> 
    </body> 
</html>

var app = angular.module('plunker', ['ui.bootstrap']); 
app.controller("DatepickerDemoCtrl", function ($scope) { 
    $scope.format = 'dd-MMMM-yyyy'; 

    $scope.today = function() { 
    $scope.dt = new Date(); 
    }; 
    $scope.today(); 

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

    $scope.opened = true; 
    }; 
});

fonte

2014-09-09 camden_kid

Non sono sicuro cosa è cambiato in 1.3, ma c'è un bug report for this.

Ecco una direttiva drop-in per il valore iniziale che corregge il problema fino a quando il bug non viene corretto. Ed ecco una demo Plunker.

angular.module('myApp').directive('datepickerPopup', function (dateFilter, datepickerPopupConfig) { 
    return { 
     restrict: 'A', 
     priority: 1, 
     require: 'ngModel', 
     link: function(scope, element, attr, ngModel) { 
      var dateFormat = attr.datepickerPopup || datepickerPopupConfig.datepickerPopup; 
      ngModel.$formatters.push(function (value) { 
       return dateFilter(value, dateFormat); 
      }); 
     } 
    }; 
});

fonte

2014-09-30 01:08:20

app.controller("DatepickerDemoCtrl", function ($scope,$filter) { .. // $filter added

$scope.today = function() { 
    $scope.dt = $filter('date')(new Date(), $scope.format); 
};

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" ... // {{format}} added

Verificare con queste tre modifiche.

fonte

2014-09-09 10:55:06

non funziona se il cambiamento $ scope.dt da un'altra funzione $ scope.prevDate = function() {var oldDate = angular.copy ($ scope.dt); $ scope.dt = new Date (oldDate.setDate (oldDate.getDate() + 1)); } – ahiipsa

Spiacente, ora ho contrassegnato la risposta di davetjohnson come la correzione corretta. La tua soluzione stava causando altri problemi (forse lo stesso di quelli indicati da ahiipsa). –

Il modo più semplice per risolvere il problema! Grazie – Maxime

AngularJS 1.3 - Il formato iniziale di Datepicker non è corretto

risposta

Problemi correlati