<!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>
<div>
<br><a href="http://www.code-sample.com/2014/09/angularjs-documentation.html">Click for more date types</a>
</div>
</body>
</html>
// Code goes here
/* Styles go here */