Search code examples
angularjs-material

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

Angularjs-Material v. 1.2.4

Both issue can be reproduced using this demo sample: https://jsfiddle.net/Drasius/z51vgqr6/27/

Angularjs-Material md-datepicker when using ng-model-options="{timezone: 'UTC'}" option input box shows date in local time and Date Picker calendar in UTC time. There is jsfiddle script with the issue 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']);

enter image description here

Found in documentation: 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.

Updated: Upgrading to angular-material 1.2.4 package version it solves initial date selection and now shown date matches, but there still is issue if you change date manually in the input field: jsFiddle sample: https://jsfiddle.net/Drasius/z51vgqr6/27/

Raised issue: https://github.com/angular/material/issues/12149

Issues:

  • When initial date loaded local date is displayed in calendar and input shows correctly UTC date.
  • When selecting same date few times - input box and calendar date is out of sync (in calendar local date is displayed - should be UTC) Both issues is reproducible using this codepen demo: https://codepen.io/Drasius/pen/dyZdvoM

enter image description here

Solution

  • There was issues with angular-material. Created isssue in angular-material github: https://github.com/angular/material/issues/12149.

    • some changes was required to my application.

    Sadly the lib is end of life and no plans to release new version so forged repo and fixed the issue, you can find fix in this repository https://github.com/vdrasutis/material. So in app instead provided angular package from bower - included my own local copy of angular-material script with my fix.

    Hire is sample of gulp task to replace gulp angular-material files with custom local copy (CoffeScript):

      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