Angular Bootstrap DatePicker UTC 错误输出答案

【问题标题】：Angular Bootstrap DatePicker UTC wrong outputAngular Bootstrap DatePicker UTC 错误输出
【发布时间】：2015-10-27 15:52:24
【问题描述】：

您好，我在我的应用程序中使用了 Angular DatePicker，它按预期工作。我尝试使用 UTC 时间，并使用此值初始化日期选择器：

scope.model.value = moment.utc().startOf('day').toDate()

这个结果就是这个日期：

Tue Oct 27 2015 01:00:00 GMT+0100 (Mitteleuropäische Zeit)

如果我现在想选择一个日期，例如：2016 年 6 月 1 日，scope.model.value 的结果是：

"2016-05-31T23:00:00.000Z"

为什么我的 DatePicker 将我的日期对象更改为另一种格式？我该如何处理输出格式？为什么选择 6 月 1 日时是 5 月 31 日？

我尝试了几种方法，例如删除 UTC 时间信息。例如： (https://gist.github.com/weberste/354a3f0a9ea58e0ea0de):

(function () {
'use strict';
 angular
.module('myApp')
.directive('datepickerLocaldate', ['$parse', function ($parse) {
  var directive = {
    restrict: 'A',
    require: ['ngModel'],
    link: link
  };
  return directive;

  function link(scope, element, attr, ctrls) {
    var ngModelController = ctrls[0];

    // called with a JavaScript Date object when picked from the datepicker
    ngModelController.$parsers.push(function (viewValue) {
      // undo the timezone adjustment we did during the formatting
      viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());
      // we just want a local date in ISO format
      return viewValue;
    });

    // called with a 'yyyy-mm-dd' string to format
    ngModelController.$formatters.push(function (modelValue) {
      if (!modelValue) {
        return undefined;
      }
      // date constructor will apply timezone deviations from UTC (i.e. if locale is behind UTC 'dt' will be one day behind)
      var dt = new Date(modelValue);
      // 'undo' the timezone offset again (so we end up on the original date again)
      dt.setMinutes(dt.getMinutes() + dt.getTimezoneOffset());
      return dt;
    });
  }
}])
})

对于那些喜欢这里的人来说，我是如何使用选择器的：

<datepicker datepicker-localdate ng-model="model.value" min-date="minDate"></datepicker>

也许有人可以帮忙！

【问题讨论】：

标签： javascript angularjs twitter-bootstrap datepicker utc

【解决方案1】：

在您的应用配置中，您可以全局告诉您希望 dapicker 输出格式如何。例如：

datepickerPopupConfig.datepickerPopup = 'dd/MM/yyyy';

文档在这里：angular boostrap datepicker DOC

假设您的应用名称是“myapp”：

angular.module('myapp', [
    'ui.bootstrap'
])
.config(function(
        datepickerPopupConfig
    ) {

        datepickerPopupConfig.datepickerPopup = 'dd/MM/yyyy';

    }
);

【讨论】：

感谢您的评论。我认为这与我的解决方案很接近，但我不使用 datePickerPopup，这就是为什么你的解决方案对我的问题没有任何影响。

【解决方案2】：

所以日历问题的解决方法是：

function apply() {
    // create new UTC date object
    // necessary to prevent usage of browser timezone which results in selection of previous day in some cases
    if (scope.model.type === 'calendar') {
      var date = moment(scope.model.value);
      scope.model.value = new Date(Date.UTC(date.format('YYYY'), date.format('MM')-1, date.format('DD')));
    }

希望这可以帮助其他人解决这个问题！

最好的问候

【讨论】：