AngularJS & UI Bootstrap(DatePicker) - 选择日期后，ngModel 将不会保留 UTC 时间戳

Question

使用：

UI Bootstrap datePicker 组件（版本 0.13.4）
AngularJS（版本 1.4.5）

我正在尝试格式化用户选择日期的绑定 ngModel 值，因此我可以通过 $http

将该值作为 UTC 时间戳传递

这是我的 HTML

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="ui-bootstrap-tpls-0.13.4.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="formApp" ng-controller="formController">

    <p>Selected date is: {{ formData.dt | date:'fullDate' }}</p>
    <p>The binded ngModel is: {{ formData.dt }}</p>

    <div style="display:inline-block; min-height:290px;">
        <datepicker 
            ng-model="formData.dt"
            min-date="minDate"
            max-date="maxDate" 
            show-weeks="false"
            starting-day = "1"
            class="">
        </datepicker>
    </div>

  </body>

</html>

这里是控制器

var app = angular.module('formApp', ['ui.bootstrap'])

app.controller('formController', function($scope, $http) {

  $scope.formData = {};

  var date = new Date();
  $scope.formData.dt = date.getTime();

});

这是一个 Plunker 演示 - http://plnkr.co/edit/3vKIO3187ZC2FAnlw2ZW?p=preview

如您所见，在选取器中选择任何日期都会更改模型格式。如何设置它以便在选择任何日期时它仍然具有 UTC 值？

Answer 1

您必须在指令中创建自己的 $parser 以按照您希望的格式设置日期值的格式。

app.directive('dateAsMs', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope,elem,attrs,ngModelCtrl) {
      ngModelCtrl.$parsers.push(function(value){
        if (value && value.getTime) {
          return value.getTime();
        } else {
          return value;
        }
      });
    }
  };
});

然后将属性 date-as-ms 添加到您的 datepicker 元素

这是您修改后的 plnkr：http://plnkr.co/edit/0V3CkLt8Gjtwc9Jj3zxE?p=preview

AngularJS & UI Bootstrap(DatePicker) - 选择日期后，ngModel 将不会保留 UTC 时间戳

AngularJS & UI Bootstrap(DatePicker) - After date selection, the ngModel will not keep the UTC timestamp

datepicker

angularjs

angular-ui-bootstrap