<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-messages.js"></script>
</head>
<body ng-controller="DatesCtrl">
<h1>Standard</h1>
<p>
<input id="date" type="date"
min="2015-09-12"
max="2015-09-15"
onchange="onChange()">
</p>
<h1>AngularJS</h1>
<p>
<form name="form">
<input type="date" name="date"
min="{{min | date: 'yyyy-MM-dd'}}"
ng-min="min"
max="{{max | date: 'yyyy-MM-dd'}}"
ng-max="max"
ng-model="date">
<div ng-messages="form.date.$error" ng-show="form.date.$invalid" style="color: red">
<div ng-message="date">Invalid date</div>
<div ng-message="min">Should be >= min</div>
<div ng-message="max">Should be <= max</div>
</div>
<pre>form.date.$error = {{form.date.$error | json}}</pre>
</form>
</p>
<pre>date = {{date}}</pre>
<pre>min = {{min}}</pre>
<pre>max = {{max}}</pre>
<script>
'use strict';
var date = document.getElementById('date');
function onChange() {
var value = date.value;
console.log('date:', value, typeof(value));
}
date.addEventListener('change', function(event) {
console.log('date:', event.target.value, typeof(event.target.value));
});
var app = angular.module('app', ['ngMessages']);
app.controller('DatesCtrl', function($scope) {
function createDate(date, days) {
var d = new Date(date);
d.setDate(date.getDate() + days);
return d;
}
var now = new Date();
$scope.date = now;
$scope.min = createDate(now, -5);
$scope.max = createDate(now, +5);
});
</script>
</body>
</html>