AngularJS directives for pickadate.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.editorconfig Add editorconfig file Dec 16, 2014
.gitignore
.jshintrc
.npmignore
.release.json Update release-it configuration to match v2 configuration Sep 18, 2015
LICENSE
README.md Add HuBoard badge Jan 21, 2016
bower.json Release v0.3.1 Feb 24, 2016
gulpfile.js Add gulp script to serve the demo page easily Feb 24, 2016
ng-pickadate.js
package.json Release v0.3.1 Feb 24, 2016

README.md

ng-pickadate

bower version npm version HuBoard

AngularJS directives for pickadate.js.

http://toilal.github.io/ng-pickadate/

Requirements

Install

  1. Install dependency using bower

     bower install ng-pickadate --save
    
  2. 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

  1. Declare the dependency

     angular.module('yourApp', ['pickadate']);
    
  2. Use pick-a-date and pick-a-time directives.

    <input type="text" pick-a-date="curDate"/>
    <input type="text" pick-a-time="curTime"/>
    $scope.curDate = new Date(); // Only the date part of curDate
                                 // is synced to pick-a-date directive
                                 
    $scope.curTime = new Date(); // Only the time part of timeDate
                                 // is synced to pick-a-time directive
  3. You can also 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"/>
    

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.module('yourApp', ['pickadate'])
  .config(['pickADateProvider', 'pickATimeProvider', function (pickADateProvider, pickATimeProvider) {
    pickADateProvider.setOptions({
      format: 'dd/mm/yy',
      selectYears: true
    });

    pickATimeProvider.setOptions({
      today: ''
    });
  }]);

Form Validation

AngularJS form validation can be used using ngModel. Keep in mind that ngModel keeps the string value of the raw input.

<form name="dateForm">
  <input type="text" name="dateInput" ng-model="curDateText" pick-a-date="curDate"/>
  <div ng-show="dateForm.dateInput.$error.required" style="color: red;">
    <strong>Date is required.</strong>
  </div>
</form>

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 set ngModel to $pristine at the end of the postlink function.
  • When pickadate calendar opens, the input itself loses focus and its ngModel is marked as $touched. To correct this, the directives set ngModel to $untouched the first time the calendar opens, and set it to $touched whenever the calendar closes, via pickadate's onOpen and onClose methods, respectively.

Credits

This project is initially based on a blog post from Coding Insight