Datepicker nie wiążący sformatowanej wartości

Question

To prawdopodobnie łatwe pytanie, ale mam problem z this datepicker. Problem polega na tym, że ustawiłem format na dd/mm/yyyy z atrybutem data-date-format. Jednak podczas sprawdzania wartości ng-model wartość jest następująca: Wed Jul 17 2013 00:00:00 GMT+0000 (Greenwich Standard Time)

To, czego chcę, to powiązanie z formatem dd/mm/yyyy.

Jak mogę to naprawić?

Oto mój kod:

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

Aktualizacja 18.07.13:

Według odpowiedź rGil za Próbuję użyć $ $ zegarek. Zakres. Działa dobrze, ale najpierw otrzymuje poprawną datę (z funkcji serwisowej getBooking()), następnie zmienia się na AKTUALNĄ datę - która nie jest datą.

kod JavaScript jest następujący:

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

Wtedy mój HTML jest następujący:

<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

Można to łatwo zrobić bez wtyczki. Za pomocą this post można utworzyć zmienną $ scope z poprawnym formatowaniem.

Przykład:

$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 - otwarta konsola

Answer 2

Patrząc na kodzie źródłowym AngularStrap, stwierdziliśmy, że jeśli ustawić (pozornie nieudokumentowane) przypisują date-type dowolną wartość poza „Data” (na przykład: String), dzięki czemu bs-datpicker nie zwróci wybranej daty jako obiektu daty i rozwiązuje problem. Więc w tym przypadku byłoby to:

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

Testowane na AngularStrap v0.7.4 i v0.7.5

Answer 3

Istnieją sposoby, aby to zrobić w bardziej elegancki sposób, z angularjs. Po prostu użyj filtru daty Angular. Tak:

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

$ filter („data”) pobiera angularjs filtr podjęcia w args, datę, szablon i strefę czasową, a także zwraca sformatowany ciąg.

08/03/2016