Why when I choose a date (using HTML5 date), Javascript shows different date than the date from the date picker?

Question

Here's the plunker: http://plnkr.co/edit/c7N78xvGa4WYDehVZjD6?p=preview

<body ng-app="dateInputExample">
  <script>
   angular.module('dateInputExample', [])
     .controller('DateController', ['$scope', function($scope) {
       $scope.example = {
         value: new Date(2013, 9, 22)
       };
     }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
   <label for="exampleInput">Pick a date in 2013:</label>
   <input type="date" id="exampleInput" name="input" ng-model="example.value"
       placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
   <div role="alert">
     <span class="error" ng-show="myForm.input.$error.required">
         Required!</span>
     <span class="error" ng-show="myForm.input.$error.date">
         Not a valid date!</span>
    </div>
    <tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>

    {{example.value}}
</form>
</body>
</html>

Here's the output:

Why is the date value different from the one shown on date picker? How to interpret this date?

"2013-10-21T16:00:00.000Z"

Appears to be a time zone adjustment. See similar question: HTML Input type datetime-local setting the wrong time-zone — Yogi
– Yogi, Commented Feb 2, 2016 at 14:42

Alvin Thompson · Accepted Answer · 2016-02-02 14:58:52Z

1

The date picker is picking the date in your local time zone. That is, when a date is selected it's set as midnight of your local time. When displaying the date, it's being displayed in UTC (that is what the "Z" at the end signifies). Your local time zone appears to be 8 hours ahead of UTC (Russia?), so midnight of your time is 16:00 the previous day UTC. In other words, they're both exactly the same time--they're just expressed in differing time zones.

The toString() method of displaying a Date (which you're implicitly calling since you're not specifying how the date should be displayed) shows the Date in UTC with the cryptic format you see there. It was designed to be more machine readable than human readable. To display the date in your local time zone (and in a nicer format), display the date with the toDateString() method instead:

{{example.value.toDateString()}}

Now the date will match.

edited Feb 2, 2016 at 14:58

answered Feb 2, 2016 at 14:39

Alvin Thompson

5,4784 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Green Lantern Over a year ago

Yes my time zone is +8 hours ahead. How did you know my local time zone is 8 hours ahead? My meaning, the value is "2013-10-21T16:00:00.000Z", there's 16 in there, where the 8 come from? I don't know how the value is interpreted.

saikumar · Accepted Answer · 2016-02-02 14:35:42Z

0

    {{example.value|date:"MM/dd/yyyy"}}

Use angular date filter, better go with date filter documentation https://docs.angularjs.org/api/ng/filter/date

answered Feb 2, 2016 at 14:35

saikumar

1,0616 silver badges10 bronze badges

Collectives™ on Stack Overflow

Why when I choose a date (using HTML5 date), Javascript shows different date than the date from the date picker?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related