Fork me on GitHub

ng-pickadate - AngularJS pickadate.js wrapper

AngularJS directives for pickadate.js.

Date Picker

pick-a-date is the Date Picker directive.

Pick a date: => curDate is {{curDate}}

<input type="text" pick-a-date="curDate">
$scope.curDate = new Date();

Time Picker

pick-a-time is the Time Picker directive.

Pick a time: => curTime is {{curTime}}

<input type="text" pick-a-time="curTime">
$scope.curTime = new Date();

Install

With Bower

bower install ng-pickadate

Or NPM

npm install ng-pickadate

Others

Minimum and Maximum

You can provide additional max-date and min-date values. 
<input type="text" pick-a-date="startDate" max-date="endDate"/>
<input type="text" pick-a-date="endDate" min-date="startDate"/>

Pickadate options

You can define pickadate.js options through pick-a-date-options and pick-a-time-options directives as well.

Pick a date: => optionsDate is {{optionsDate}}

<input type="text" pick-a-date="optionsDate" pick-a-date-options="options" />
$scope.optionsDate = new Date();
$scope.options = { format: 'dd/mm/yy', selectYears: true };

Validation

Validation works as any other text input. It must be included in a named form, and ng-model must be defined.

=> validatedDate is {{validatedDate}}
Date is required.
$touched: {{validationForm.validatedDateInput.$touched}}, $pristine: {{validationForm.validatedDateInput.$pristine}}, $dirty: {{validationForm.validatedDateInput.$dirty}}, $valid: {{validationForm.validatedDateInput.$valid}} 
<form name="validationForm">
  <input type="text" name="validatedDateInput"
    pick-a-date="validatedDate" ng-model="validatedDateText" required>
  <div ng-show="validationForm.validatedDateInput.$error.required" style="color: red;">
    <strong>Date is required.</strong>
  </div>
</form>