Angularjs-使用ng-model-options="{timezone：'UTC'}“输入框显示在本地时区日期中的资料md-datepicker

Question

Angularjs-Material诉1.2.4

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

Angularjs-使用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

输入-类型特定选项：

时区:定义用于读取/写入模型中的日期实例的时区。它理解UTC/GMT和美国大陆时区缩写，但对于一般用途，使用时区偏移，例如，“+0430”(格林威治子午线以东4小时30分钟)，如果没有指定，将使用浏览器的时区。注意，更改时区对当前日期没有任何影响，只在下一个输入/模型更改之后应用。

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

发行：https://github.com/angular/material/issues/12149

问题：

当初始日期加载的本地日期显示在日历中，并且输入正确显示UTC日期时，

• 在选择同一日期时--输入框和日历日期不同步(在日历本地日期中应该显示UTC) --这两个问题都可以使用本代码演示程序：
• 再现。

​

​

Answer 1

角质材料有问题。创建了角质材料github：https://github.com/angular/material/issues/12149。

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

• .

遗憾的是，库已经结束了，并且没有发布新版本的计划，所以伪造回购并修复了这个问题，您可以在这个存储库https://github.com/vdrasutis/material中找到修复。因此，在应用程序中，它提供了来自保尔的角度包--包括我自己的角材料脚本的本地副本和我的修复。

Hire是gulp任务的示例，可以用自定义的本地副本(CoffeScript)：替换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

在这里输入代码