Angular UI Bootstrap Timepicker - value assignment issue with 24hr times

Question

The timepicker is not handling 24hr time assignment correctly. For e.g.

<timepicker ng-model="$time" hour-step="1" minute-step="1" show-meridian="true"></timepicker>

When I do: $scope.$time = "2012-04-23T18:25:43Z", the timepicker is updated to 06:25 AM. It should be 06:25 PM.

Even if I set show-meridian="false", it's still showing 06:25.

Answer 1

The "Z" in the ISO 8601 date format stands for UTC. Therefore, depending on the current local timezone offset, your results may vary.

For example, I am located on the east coast in the US. When daylight savings is being observed here, my timezone offset is UTC−04:00, otherwise it is UTC-05:00. For me, the result of the time portion of 2012-04-23T18:25:43Z in meridian is either: 2:25 PM or 1:25 PM depending on the time of year.

Check the snippet below to see the representation of the UTC value versus the locale-specific timepicker value that accounts for your timezone offset:

var app = angular.module('demo', ['ui.bootstrap']);

app.controller('MainCtrl', ['$scope', function ($scope) {
  
  $scope.time = '2012-04-23T18:25:43Z';
  
}]);

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css')

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>

<div ng-app="demo">

  <div class="container" ng-controller="MainCtrl">
    <h3>{{time}}</h3>
    <timepicker ng-model="time" show-meridian="true"></timepicker>
    <p>Your local timezone offset is: <strong> UTC {{time | date:'Z'}}</strong></p>
  </div>

</div>