ng-pickadate
AngularJS directives for pickadate.js.
http://toilal.github.io/ng-pickadate/
Requirements
Install
-
Install dependency using bower
bower install ng-pickadate --save
-
Set
overrides
property in bower.json to register pickadate CSS files
-
Classic theme
"overrides": { "pickadate": { "main": [ "lib/picker.js", "lib/picker.date.js", "lib/picker.time.js", "lib/themes/classic.css", "lib/themes/classic.date.css", "lib/themes/classic.time.css" ] } }
-
Default theme
"overrides": { "pickadate": { "main": [ "lib/picker.js", "lib/picker.date.js", "lib/picker.time.js", "lib/themes/default.css", "lib/themes/default.date.css", "lib/themes/default.time.css" ] } }
Usage
-
Declare the dependency
angular.module('yourApp', ['pickadate']);
-
Use
pick-a-date
andpick-a-time
directives.$scopecurDate = ; // Only the date part of curDate// is synced to pick-a-date directive$scopecurTime = ; // Only the time part of timeDate// is synced to pick-a-time directive -
You can also provide additional
max-date
andmin-date
values.<input type="text" pick-a-date="startDate" max-date="endDate"/> <input type="text" pick-a-date="endDate" min-date="startDate"/>
Options
You can define pickadate.js options through pick-a-date-options
and
pick-a-time-options
directives as well.
<input type="text" pick-a-date="curDate" pick-a-date-options="{ format: 'dd/mm/yy', selectYears: true }" />
If you find yourself setting the same options for multiple date pickers, you can set them as the default options for
all date pickers by configuring pickADateProvider
and pickATimeProvider
.
angular ;
Form Validation
AngularJS form validation can be used using ngModel
. Keep in mind that
ngModel
keeps the string value of the raw input.
Date is required.
In order to correct how the pickadate.js affects ngModel
states of its assigned input, ng-pickadate uses
ngModelController
to manually restore expected form validation states: $pristine
, $dirty
, $untouched
,
and $touched
. The unexpected angular validation states caused by the pickadate.js jQuery plugin, and how they've been
corrected, are as follows:
- When pickadate is initialized on an input, this triggers the input's
ngModel
to be marked as$dirty
. To correct this, the ng-pickadate directives each setngModel
to$pristine
at the end of thepostlink
function. - When pickadate calendar opens, the input itself loses focus and its
ngModel
is marked as$touched
. To correct this, the directives setngModel
to$untouched
the first time the calendar opens, and set it to$touched
whenever the calendar closes, via pickadate'sonOpen
andonClose
methods, respectively.
Credits
This project is initially based on a blog post from Coding Insight