Question

这可能是一个简单的问题，但我遇到this datepicker的问题。问题是我使用dd/mm/yyyy属性将格式设置为data-date-format。但是，在检查我的ng-model时，值如下：Wed Jul 17 2013 00:00:00 GMT+0000 (Greenwich Standard Time)

我想要的是绑定到dd/mm/yyyy格式。

我该如何解决这个问题？

这是我的代码：

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

更新18.07.13：

根据rGil的回答，我试图使用$ scope。$ watch。它工作正常，但首先它获得CORRECT日期（来自getBooking（）服务函数），然后它更改为CURRENT日期 - 这不是日期。

JavaScript代码如下：

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

然后我的HTML如下：

<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

查看AngularStrap源代码，我发现如果将（看似未记录的）属性date-type设置为“Date”之外的任何值（例如：String），则会阻止{{1将所选日期作为日期对象返回并解决问题。所以在这种情况下它将是：

bs-datpicker

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

上进行了测试

Answer 2

这可以在没有插件的情况下轻松完成。使用this post，您可以使用正确的格式创建$ scope变量。

示例：

$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 - 打开控制台

Answer 3

使用AngularJS可以通过更优雅的方式实现这一目标。只需使用日期过滤器Angular。像这样：

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

$ filter（＆＃39; date＆＃39;）获取带有args，日期，模板和时区的angularjs过滤器，并返回格式正确的字符串。

08/03/2016

Datepicker没有绑定格式化的值

3 个答案: