Table of Context bout the input date.
Click for live demo on plnker
1. Allow to use of a custom date format like "yyyy/MM/dd" or "yyyy-MM-dd" etc.
2. Allow to check the input date typed by the user is correct or not.
The Example 1 code as given below.
Click for live demo on plnker
1. Allow to use of a custom date format like "yyyy/MM/dd" or "yyyy-MM-dd" etc.
2. Allow to check the input date typed by the user is correct or not.
1
2
3
4
| //The model must be a Date object, otherwise Angular will throw an error. //The error is Invalid Date objects will be rendered as an empty string. i.e.The dates whose getTime() is NaN. |
//The model must be a Date object, otherwise Angular will throw an error.
//The error is Invalid Date objects will be rendered as an empty string. i.e.
The dates whose getTime() is NaN.
The Example 1 code as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
| <!doctype html><html lang="en"><head> <meta charset="utf-8" /> <script> function MainController($scope) { $scope.date = new Date(); } </script></head><body ng-app> <div ng-controller="MainController"> <input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" /> <br />{{ date | date: 'dd/MM/yyyy' }} </div></body></html> |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.date = new Date();
}
</script>
</head>
<body ng-app>
<div ng-controller="MainController">
<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />
<br />{{ date | date: 'dd/MM/yyyy' }}
</div>
</body>
</html>
The Out Put as given below.
Example 2 : Input Date Time using Directive for live DEMO
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <!DOCTYPE html><html><head> <script> var app = angular.module("dateApp", []); app.controller('dateController', function($scope, dateFilter) { $scope.date = new Date(); }); app.directive('dateInputTime', function(dateFilter) { return { require: 'ngModel', template: '<input type="date"></input>', replace: true, link: function(scope, elm, attrs, ngModelCtrlVal) { ngModelCtrlVal.$formatters.unshift(function(val) { return dateFilter(val, 'yyyy/MM/dd'); }); ngModelCtrlVal.$parsers.unshift(function(val) { return new Date(val); }); }, }; }); </script></head><body ng-app="dateApp"> <div ng-controller="dateController"> <div> <h3>Input date time</h3> </div> <div> <input date-input-time ng-model="date" /> </div> <div>{{ date | date: 'yyyy/MM/dd' }}</div> </div></body></html> |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script>
var app = angular.module("dateApp", []);
app.controller('dateController', function($scope, dateFilter) {
$scope.date = new Date();
});
app.directive('dateInputTime',
function(dateFilter) {
return {
require: 'ngModel',
template: '<input type="date"></input>',
replace: true,
link: function(scope, elm, attrs, ngModelCtrlVal) {
ngModelCtrlVal.$formatters.unshift(function(val) {
return dateFilter(val, 'yyyy/MM/dd');
});
ngModelCtrlVal.$parsers.unshift(function(val) {
return new Date(val);
});
},
};
});
</script>
</head>
<body ng-app="dateApp">
<div ng-controller="dateController">
<div>
<h3>Input date time</h3>
</div>
<div>
<input date-input-time ng-model="date" />
</div>
<div>{{ date | date: 'yyyy/MM/dd' }}</div>
</div>
</body>
</html>
The Out put look like below image.
