Angularjs-Material md-datepicker 使用 ng-model-options="{timezone: 'UTC'}" 输入框时显示本地时区日期

Question

Angularjs-Material v. 1.2.4

这两个问题都可以使用这个演示示例重现： https://jsfiddle.net/Drasius/z51vgqr6/27/

Angularjs-Material md-datepicker 当使用 ng-model-options="{timezone: 'UTC'}" 选项输入框显示本地时间日期和日期选择器日历在 UTC 时间。存在问题 https://jsfiddle.net/Drasius/z51vgqr6/11/

的 jsfiddle 脚本

<div id="app">
  
      <div>
        <strong>Date in local timezone:</strong>
        {{date|date:"yyyy-MM-dd HH:mm Z"}}
      </div>
      <div>    
        <strong>Date in UTC timezone:</strong>
        {{date|date:"yyyy-MM-dd HH:mm Z":"UTC"}}
      </div>
      
      </br>
      <md-datepicker required ng-model="date" ng-model-options="{timezone: 'UTC'}" ></md-datepicker>
</div>

JavaScript

date = new Date().setUTCHours(23,0,0,0);
angular
  .module('app', ['ngMaterial']);

angular
  .bootstrap(document.querySelector('#app'), ['app']);

在文档中找到：https://docs.angularjs.org/api/ng/directive/ngModelOptions#specifying-timezones

Input-type specific options:

timezone: Defines the timezone to be used to read/write the Date instance in the model for , , ... . It understands UTC/GMT and the continental US time zone abbreviations, but for general use, use a time zone offset, for example, '+0430' (4 hours, 30 minutes east of the Greenwich meridian) If not specified, the timezone of the browser will be used. Note that changing the timezone will have no effect on the current date, and is only applied after the next input / model change.

更新：升级到angular-material 1.2.4包版本它解决了初始日期选择和现在显示的日期匹配，但仍然有如果您在输入字段中手动更改日期会出现问题：jsFiddle 示例：https://jsfiddle.net/Drasius/z51vgqr6/27/

提出的问题：https://github.com/angular/material/issues/12149

问题：

当初始日期加载本地日期显示在日历中并且输入正确显示 UTC 日期时。
当多次选择同一日期时 - 输入框和日历日期不同步（在日历中显示本地日期 - 应该是 UTC）使用此代码笔演示可以重现这两个问题：https://codepen.io/Drasius/pen/dyZdvoM

Answer 1

angular-material 存在问题。在 angular-material github 中创建问题：https://github.com/angular/material/issues/12149.

我的应用程序需要进行一些更改。

遗憾的是，该库已停产并且没有发布新版本的计划，因此伪造了回购协议并解决了问题，您可以在此存储库中找到修复程序 https://github.com/vdrasutis/material。所以在应用程序中提供了来自 bower 的 angular 包 - 包括我自己的 angular-material 脚本本地副本和我的修复程序。

Hire 是 gulp 任务示例，用自定义本地副本 (CoffeScript) 替换 gulp angular-material 文件：

  jsfiles = plugins.bowerFiles filter: ["**/*.js", "!**/angular-mocks/*.js","!**/angular-material/*.js","!**/angular-material-mocks/*.js"]
  # Filtering out angular-material form npm and adding local version of angular-material
  jsfiles.push('./src/custom_frameworks/angular-material.js')
  jsfiles.push('./src/custom_frameworks/angular-material-mocks.js')

  gulp.src jsfiles
    .pipe plugins.plumber(errorHandler: plugins.notify.onError("Error: <%= error %>"))
    .pipe plugins.if config.releaseMode, plugins.concat "#{config.pkg.name}-frameworks.js"
    .pipe plugins.if config.releaseMode, plugins.uglify( { output: { max_line_len: 0 } } )
    .pipe plugins.if config.releaseMode, plugins.rev()
    .pipe gulp.dest config.dist.assets.frameworksPath

在此处输入代码

Angularjs-Material md-datepicker 使用 ng-model-options="{timezone: 'UTC'}" 输入框时显示本地时区日期

Angularjs-Material md-datepicker when using ng-model-options="{timezone: 'UTC'}" input box displayed in local time zone date

angularjs-material