Datepicker not binding formatted value

Question

This is probably an easy question, but I'm having a problem with this datepicker. The problem is I set the format to dd/mm/yyyy with data-date-format attribute. However, when checking my ng-model the value is the following: Wed Jul 17 2013 00:00:00 GMT+0000 (Greenwich Standard Time)

What I want is it to bind to dd/mm/yyyy format.

How can I fix this?

Here is my code:

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

Update 18.07.13:

According to rGil's answer I tried to use $scope.$watch. It works fine but first it gets the CORRECT date (from getBooking() service function), then it changes to the CURRENT date - which is not the date.

JavaScript code is following:

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

Then my HTML is the following:

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

score 10 · Answer 1 · edited Apr 10 '16 at 10:40

10

Looking over the AngularStrap source code, I found that if you set the (seemingly undocumented) attribute date-type to any value outside of "Date" (for example: String) this prevents bs-datpicker from returning the selected date as a date object and solves the issue. So in this case it would be:

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

Tested on AngularStrap v0.7.4 and v0.7.5

edited Apr 10 '16 at 10:40

Mosh Feu

28,354
16
88
135

answered Nov 13 '13 at 09:09

MCybertron

123
1
6

1

The solution for me was to just use the `date-type="string"`. If I included the `date-format` the date was not correct. – Nicros Dec 13 '13 at 01:11

score 6 · Accepted Answer · edited May 23 '17 at 11:45

6

This can easily be done without a plugin. Using this post you can create a $scope variable with the correct formatting.

Example:

$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 - open console

edited May 23 '17 at 11:45

Community

1
1

answered Jul 16 '13 at 04:23

rGil

3,719
1
22
30

Maybe you can help me further with this example you provided for me. The first alert I get is the correct one (from getBooking() service), then the second one is the CURRENT date. I updated my post. Please help me. – Gaui Jul 18 '13 at 01:02

score 2 · Answer 3 · answered Mar 08 '16 at 15:13

There are ways to do it in a more elegant way, with AngularJS. Just use the date filter Angular. Like this:

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

$filter('date') gets the angularjs filter that take in args, the date, the template and the timezone, and returns a well formatted string.

08/03/2016

Datepicker not binding formatted value

3 Answers3