Javascript date object is always one day less

Question

I'm trying to build a TODO list application. I've mostly done all the parts and only problem is the date picker.

In the date picker, the date is reduced by 1 and I don't need time followed by the date. How can I do that?

var app = angular.module("ToDoList", []);
app.controller("myCtrl", function($scope) {
  $scope.todos = [];
  $scope.addItem = function() {
    $scope.errortext = "";
    if (!$scope.todos) {
      return;
    }
    if ($scope.todos.indexOf($scope.todo) == -1) {
      $scope.todos.push($scope.todo);
      $scope.todo = {};
    } else {
      $scope.errortext = "This is already in your To Do list list.";
    }

    var x = document.getElementById("myDate").value;
    document.getElementById("demo").innerHTML = x;




  }
  $scope.removeItem = function(x) {
    $scope.errortext = "";
    $scope.todos.splice(x, 1);
  }
});

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="ToDoList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
    <header class="w3-container w3-light-grey w3-padding-16">
      <h3>To Do List</h3>
    </header>
    <ul class="w3-ul">

      <li ng-repeat="x in todos" class="w3-padding-16">
        <h3>Task:</h3>{{x.name}}<br>
        <h3>Content:</h3>{{x.progress}}<br>
        <h3>Date:</h3>{{x.date}}
        <span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right"><button>Del</button></span></li>
    </ul>
    <div class="w3-container w3-light-grey w3-padding-16">
      <div class="w3-row w3-margin-top">
        <div class="w3-col s10">
          <input placeholder="Task!" ng-model="todo.name" class="w3-input w3-border w3-padding">
        </div>
        <div class="w3-col s10">

          <textarea placeholder="Content Here!" ng-model="todo.progress" class="w3-input w3-border w3-padding"></textarea>
          <input type="date" id="myDate" ng-model="todo.date" value="2012-03-21">
        </div>
        <div class="w3-col s2">
          <br>
          <br><br>
          <button ng-click="addItem()" class="w3-btn w3-padding brown-color">Add</button>
        </div>
      </div>
      <p class="w3-text-red">{{errortext}}</p>
    </div>
  </div>

  <script type="text/javascript" src="script.js"></script>

</body>

</html>


<textarea placeholder="Content Here!" ng-model="todo.progress" class="w3-input w3-border w3-padding"></textarea>
<input type="date" id="myDate" ng-model="todo.date" value="2012-03-21">
</div>

I'm trying to build a TODO list application. I've mostly done all the parts and only problem is the date picker.

In the date picker, the Javascript date object always one day lesser. Any solution for this. Thanks in Advance!!

Possible duplicate of [Javascript date object always one day off?](https://stackoverflow.com/questions/7556591/javascript-date-object-always-one-day-off) — , May 23 '17 at 12:00

score 0 · Accepted Answer · answered May 23 '17 at 12:37

0

You can check this plnkr with your given example to use $filter to convert the date.

$filter('date')(yourDate, 'MM/dd/yyyy', 'US');

answered May 23 '17 at 12:37

Immanuel Kirubaharan

1,094
1
11
17

Thanks i'll try it. – Karthik Ravi May 23 '17 at 16:11

Javascript date object is always one day less

1 Answers1