AngularJS and HTML5 date input value - how to get Firefox to show a readable date value in a date input?

The <input> elements of type date allows user to enter date, using a text box or using date picker. With the ng-model directive, bins the values of AngularJS application data to HTML input controls. Firefox does not currently support type="date". It will convert all the values to string. Since

you want date to be a real Date object and not a string, so we create another variable, and then link the two variables as done in the below given code

<input type = "date" ng-model = "realdate" />
function MainCtrl($scope, dateFilter) {
   $scope.date = new Date();
   $scope.$watch('date', function (date){
      $scope.dateString = dateFilter(date, 'yyyy-MM-dd');
   });
   $scope.$watch('realdate', function (realdate){
      $scope.date = new Date(realdate);
   });
}

Ankith Reddy

Published on 20-Mar-2018 12:41:31

• Related Questions & Answers
• HTML DOM Input Date value Property
• Parse string date value input in Java
• Parse string date time value input in Java
• HTML DOM Input Date Object
• How to add a date and time in HTML5?
• How to display human readable date in HTML?
• How to format date value in JavaScript?
• How to convert a Date value to string in JDBC?
• HTML DOM Input Date autofocus Property
• HTML DOM Input Date disabled Property
• HTML DOM Input Date form Property
• HTML DOM Input Date name Property
• HTML DOM Input Date max Property
• HTML DOM Input Date min Property
• HTML DOM Input Date stepDown() Method