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 时间日期选择器日历。 有 jsfiddle 脚本有问题https://jsfiddle.net/Drasius/z51vgqr6/11/

<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

输入类型特定选项：

timezone：定义用于读取/写入日期的时区 , , ... 的模型中的实例。它了解 UTC/GMT 和美国大陆时区 缩写，但对于一般用途，使用时区偏移量，用于 例如，“+0430”（格林威治子午线以东 4 小时 30 分钟） 如果未指定，将使用浏览器的时区。 请注意 更改时区对当前日期没有影响，并且是 仅在下一次输入/模型更改后应用。

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

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

问题：

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

Answer 1

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

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

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

Hire 是使用自定义本地副本 (CoffeScript) 替换 gulp 角度材料文件的 gulp 任务示例：

  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

在此处输入代码