HTML5 Input Date Type for AngularJS

HTML5 input type date function we can easily handle it. First of all we need angularJS library and then make a function in angular for calling ng-model value. In html section we need a two input fields for calling function and getting correct date for input field that will be hidden.

HTML

<div ng-app="AppCMS" ng-controller="CtrlCMS">
  <p>
  <input type="date" ng-model="html5date['dob1']" ng-change="html5date('dob1')">
	<input type="hidden" ng-model="user.created_date" ng-value="user.created_date = dob1">
  {{user.created_date}}
  </p>
	<!-- initialize or getting input/value from database -->
  <p>
	<input type="date" ng-model="html5date['dob2']" ng-change="html5date('dob2')" ng-value="'2017-11-11'"/>
	<input type="hidden" ng-model="user.updated_date" ng-value="user.updated_date = dob2">
  {{user.updated_date}}
  </p>
  <p ng-init="user.dob='2018-03-22'">
	<input type="date" ng-model="html5date['dob']" ng-change="html5date('dob')" ng-value="user.dob"/>
	<input type="hidden" ng-model="user.dob" ng-value="user.dob = (dob) ? dob : user.dob">
  {{user.dob}}
  </p>
</div>


<script>
/* we must be need angularjs version 1.4.8 */
var app = angular.module('AppCMS', []);
app.controller('CtrlCMS', function($scope) {
    $scope.html5date = function($date){
      var dateStr = $scope.html5date[$date]; if(!dateStr) return false;
      var monthStr = dateStr.getMonth()+1, dayStr = dateStr.getDate();
      var month = (monthStr < 10) ? '0' + monthStr : monthStr;
      var day = (dayStr < 10) ? '0' + dayStr : dayStr;
      $scope[$date] = dateStr.getFullYear() + '-' + month + '-' + day;
      console.log($scope[$date]);
		};
});
</script>

CSS

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Laravel | Photoshop | Firework | Dreamweaver
*/