Javascript日期对象总是少一天

时间:2017-05-23 11:47:40

标签: javascript html angularjs

我正在尝试构建一个TODO列表应用程序。我主要做了所有的部分,唯一的问题是日期选择器。

在日期选择器中,日期减少1,我不需要时间,然后是日期。我怎么能这样做?

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>

我正在尝试构建一个TODO列表应用程序。我主要做了所有的部分,唯一的问题是日期选择器。

在日期选择器中,Javascript日期对象总是少一天。任何解决方案。在此先感谢!!

1 个答案:

答案 0 :(得分:0)

您可以使用给定示例检查此plnkr,以使用 $ filter 转换日期。

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