Angular DateTime and TimeZone Behaviour

Testing Datetime in Angular

by Mateus Correia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div id="body">
  <div ng-controller="FrameController as vm">
  <h1>
    TimeZone do seu navegador : {{vm.timezone}}
    </h1>
  <H1>Com timezone - UTC</H1>
  <div>
    Date Time Raw: {{vm.date20170901UTC}}.
  </div>
  <div>
    Date Time Local: {{vm.date20170901UTC | date:'dd/MM/yyyy HH:mm:ss'}}.
  </div>
  <!-- 
  https://stackoverflow.com/a/29675847/3424212
  -->
  <div>
    Date Time com Utc: {{vm.date20170901UTC | date:'dd/MM/yyyy HH:mm:ss' : 'UTC'}}.
  </div>
  <!--
  http://coffeedriven.org/utc-dates-handling-in-angularjs-applications/
  -->
  <div>
    Input Com Tiemzone UTC
    <input type=date 
      ng-model="vm.date20170901UTC"                           
	    ng-model-options="{timezone: 'UTC'}">
  </div>
  <div>
    Input Sem UTC
    <input type=date 
      ng-model="vm.date20170901UTC"">
  </div>
  <H1>Com timezone - Brasília</H1>
  <div>
    Date Time Raw: {{vm.date20170901Brasilia}}.
  </div>
  <div>
    Date Time Local: {{vm.date20170901Brasilia | date:'dd/MM/yyyy HH:mm:ss'}}.
  </div>
  <div>
    Date Time Local: {{vm.date20170901UTC | date:'dd/MM/yyyy HH:mm:ss' : 'UTC'}}.
  </div>
  <H1>Sem timezone</H1>
  <div>
    Date Time Raw: {{vm.date20170901}}.
  </div>
  <div>
    Date Time Local: {{vm.date20170901 | date:'dd/MM/yyyy HH:mm:ss'}}.
  </div>
  
    <H1>Com timezone - new Date()</H1>
  <div>
    Date Time Raw: {{vm.dateNewDate}}.
  </div>
  <div>
    Date Time Local: {{vm.dateNewDate | date:'dd/MM/yyyy HH:mm:ss'}}.
  </div>
  <div>
    Date Time com Utc: {{vm.dateNewDate | date:'dd/MM/yyyy HH:mm:ss' : 'UTC'}}.
  </div>
  </div>
</div>

JavaScript

angular.module('app', [])

.controller('FrameController', ['$injector', function($injector) {
  var vm = this;
  vm.date20170901UTC = new Date('2017-09-01T00:00:00Z');
  vm.date20170901Brasilia = new Date('2017-09-01T00:00:00-03:00');
  //Safari não converte data canonica yyyy-MM-dd
  //https://stackoverflow.com/a/5646753/3424212
  vm.date20170901 = new Date('2017-09-01'.replace(/-/g, "/"));
  vm.dateNewDate = new Date(2017, 8, 1, 0, 0, 0, 0)
  //https://stackoverflow.com/a/1091399/3424212
  vm.offset = new Date().getTimezoneOffset();
  vm.timezone = vm.offset * -1 / 60;
}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});