Datepicker valore non vincolato in formato

Question

Questa è probabilmente una domanda facile, ma ho un problema con this datepicker. Il problema è che ho impostato il formato su dd/mm/yyyy con l'attributo data-date-format. Tuttavia, quando si verifica il mio ng-model il valore è il seguente: Wed Jul 17 2013 00:00:00 GMT+0000 (Greenwich Standard Time)

Quello che voglio è quello di legarsi al formato dd/mm/yyyy.

Come posso risolvere questo?

Ecco il mio codice:

<label for="inputDateFrom">Frá</label> 
<div class="control-group input-append"> 
    <input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd/mm/yyyy" bs-datepicker> 
    <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button> 
</div> 

Aggiornamento 18.07.13:

Secondo la risposta di rGil Ho cercato di usare $ portata $ orologio.. Funziona bene ma prima ottiene la data CORRETTA (dalla funzione di servizio getBooking()), quindi cambia alla data CORRENTE - che non è la data.

codice JavaScript è la seguente:

$scope.$watch('booking.Booking.DateFrom', function(v){ // using the example model from the datepicker docs 
    $scope.booking.Booking.DateFrom = moment(v).format(); 
    alert(moment(v).format()); 
}); 

$scope.$watch('booking.Booking.DateTo', function(v){ // using the example model from the datepicker docs 
    $scope.booking.Booking.DateTo = moment(v).format(); 
    alert(moment(v).format()); 
}); 

// Sækjum staka bókun 
if(bookingID != null) { 
    BookingService.getBooking(bookingID).then(function(data) { 
     $scope.booking = data.data; 
     $scope.booking.Booking.DateFrom = moment($scope.booking.Booking.DateFrom); 
     $scope.booking.Booking.DateTo = moment($scope.booking.Booking.DateTo); 
    }); 
} 

Poi il mio HTML è il seguente:

<label for="inputDateFrom">Frá</label> 
<div class="control-group input-append"> 
     <input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd-mm-yyyy" bs-datepicker> 
     <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button> 
</div> 

<label for="inputDateTo">Til</label> 
<div class="control-group input-append"> 
     <input type="text" ng-model="booking.Booking.DateTo" data-date-format="dd-mm-yyyy" bs-datepicker> 
     <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button> 
</div> 

Answer 1

Questo può facilmente essere fatto senza un plugin. Utilizzando this post è possibile creare una variabile $ scope con la formattazione corretta.

Esempio:

$scope.$watch('datepicker.date', function(v){ // using the example model from the datepicker docs 
    var d = new Date(v); 
    var curr_date = d.getDate(); 
    var curr_month = d.getMonth() + 1; //Months are zero based 
    var curr_year = d.getFullYear(); 
    $scope.modDate = curr_date + "/" + curr_month + "/" + curr_year; 
    console.log($scope.modDate) 
}) 

FORKED DEMO - console aperta

Answer 2

Guardando oltre il codice sorgente AngularStrap, ho scoperto che se si imposta la (apparentemente non documentato) attributo date-type a qualsiasi valore al di fuori della "Data" (ad esempio: String) impedisce a bs-datpicker di restituire la data selezionata come oggetto di data e risolve il problema. Quindi, in questo caso sarebbe:

<input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd/mm/yyyy" date-type="string" bs-datepicker> 

provata su AngularStrap v0.7.4 e v0.7.5

Answer 3

ci sono modi per farlo in un modo più elegante, con AngularJS. Basta usare il filtro della data Angolare. Come questo:

$filter('date')(date, "yy/MM/yyyy", date.getTimezoneOffset()) 

$ filtro ('data') ottiene il filtro angularjs che prendere in args, la data, il modello e il fuso orario, e restituisce una stringa ben formattato.

08/03/2016