- Works adding a pikaday attribute to the input element
- Uses native datepicker in mobile devices (requires modernizr to detect browser capabilities)
- Allows you to change the default date format
Load the pikaday files in the head section:
<head>
<link rel="stylesheet" href="pikaday.css"/>
<script type="text/javascript" src="pikaday.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ng-pikaday.js"></script>
</head>Add the pikaday attribute to the input field and bind the value to your model:
<input type="text" pikaday="" ng-model="dateOfBirth">Load the Pikaday dependency in your module and supply your value in the controller:
angular.module('ExampleModule',['Pikaday'])
.controller('BasicCtrl',['$scope', function ($scope){
$scope.dateOfBirth = 'Tue Nov 23 1999';
}]);#Formatting
For custom formatting Pikaday uses moment. Include the reference to moment file in head section, and add the format attribute to the input file:
<script type="text/javascript" src="moment.min.js"></script>
.
.
.
<input type="text" id="datepicker" pikaday="" ng-model="dateOfBirth" format="DD-MM-YYYY">#Mobile
When the input file is visualized in a mobile device, the html5 native date picker is used. The moment library is required in this case, and a bit of css:
.mobile-date {
position: relative;
overflow: hidden;
}
.mobile-date > input[type=text] {
z-index: 0;
}
.mobile-date > input[type=date] {
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
height: 30px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-min-logical-width: 90%;
}