2017-05-23 3 views
0

Ich versuche, eine TODO-Liste Anwendung zu erstellen. Ich habe meistens alle Teile gemacht und nur Problem ist die Datumsauswahl.Javascript Datum Objekt ist immer einen Tag weniger

In der Datumsauswahl wird das Datum um 1 reduziert und ich brauche keine Zeit gefolgt von dem Datum. Wie kann ich das machen?

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>

Ich versuche, eine ToDo-Liste Anwendung zu erstellen. Ich habe meistens alle Teile gemacht und nur Problem ist die Datumsauswahl.

In der Datumsauswahl ist das Javascript-Datumsobjekt immer einen Tag kleiner. Irgendeine Lösung dafür. Danke im Voraus!!

+2

Mögliche Duplikat [object Javascript Datum immer einen freien Tag?] (Https://stackoverflow.com/questions/7556591/javascript-date-object-always-one-day-off) –

Antwort

0

Sie können dieses plnkr mit Ihrem gegebenen Beispiel überprüfen, um $ filter zu verwenden, um das Datum zu konvertieren.

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

Dank i‘ Ich werde es versuchen. –

Verwandte Themen