ng-pikaday v2.0.1

ng-pikaday is a directive wraper that aims to make using Pikaday with AngularJS as simple as possible. Examples →

Install (NPM & Bower)

[npm || bower] install --save ng-pikaday

ng-pikaday is provided in a UMD wrapper, making it compatible with several build systems & preprocessors such as Browserify, see the source of the Example page to see ng-pikaday being used with Browserify & Gulp.

How simple? - Include the module as a dependency.

angular.module('YourApp', ['pikaday'])

Then use the pikaday attribute to bind the picker to a scope.

<input pikaday="myPickerObject" ng-model="date">

You now have access to Pikaday's methods from the scoped object myPickerObject. and date's value will be a date object representing the value.

Attributes

Any of Pikaday's options can be passed to the corresponding attribute, the directive takes care of coercing the value to the proper type.*

*With the exception of function expressions, which are bound as callbacks. see: Functions

<input pikaday ng-model="date" number-of-months="2" min-date="minDate" maxDate="maxDate">

minDate and maxDate are watched, so that you can change max/min date dynamically.

Global config

Optionally, you may provide a global config* object for all pickers by creating a pikadayConfigProvider.

*In-line attributes override global configs.

angular.module('YourApp')
  .config(['pikadayConfigProvider', function(pikaday) {
    pikaday.setConfig({
      numberOfMonths: 2
    });
  }])

Functions

Pikaday has several events you can bind callbacks to: onSelect, onOpen, onClose, onDraw, and disableDayFn. Callbacks can be passed two optional, predefined parameters in the function expression:

Option | Type | Description ------------- | ------------- | ------------ pikaday | Object: Pikaday | The Pikaday object for the current input date | Object: Date | The current selected date, or date to be evaluated by the filter

Example:

<!-- controller as syntax - onSelect callback -->
<input pikaday="ctrl.myPicker" on-select="ctrl.onPikadaySelect(pikaday)">

<!-- scope syntax - passing date to filter Fn -->
<input pikaday="myPicker" on-disable-day="myDateFilter(date)">

Then in your controller:

angular.module('YourApp')
  .controller('sampleController', function() {
    // use scope.onPikadaySelect for older scope syntax
    this.onPikadaySelect = function onPikadaySelect(pikaday) {
      alert(pikaday.toString());
    };
  });

Methods

You can access any of Pikaday's methods though the named scope, i.e. myPickerObject. For example, if you needed to apply a maximum date after the picker is initialised, you simply call the setMaxDate method.

angular.module('YourApp')
  .controller('sampleController', function() {
    this.someFunction = function () {
      this.myPickerObject.setMaxDate(new Date( '01/01/2016' ));
    }
  });

See Pikaday's documentation for a full list of available methods.

i18n

To set the language with the i18n attribute, you must create a locales object, and pass it to setConfig. This makes setting locale using the attribute i18n="de" possible. You may also want to configure Moment.js to handle formatting the output in the appropriate i18n locale. see: Moment.

.config(['pikadayConfigProvider', function(pikaday) {

  var locales = {
    de: {
      previousMonth : 'Vorheriger Monat',
      nextMonth     : 'Nächster Monat',
      months        : ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
      weekdays      : ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
      weekdaysShort : ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."]
    }
  };

  pikaday.setConfig({

    i18n: locales.de, // sets the default language [optional]
    locales: locales // required if setting the language using the i18n attribute

  });
}])

Moment.js

If you load Moment.js anywhere in your HTML, Pikaday will automatically start using Moment to parse input dates and format the pickers output. If you are using Moment.js anywhere in your document, you should* specify the format option, either in the global config or as an attribute.

*Otherwise Moment.js will use some rather counter intuitive ISO8601 compliant defaults "YYYY-MM-DDTHH:mm:ssZ".

Caveat: Whilst it's possible to specify some fancy output formats with Moment, it may have a detrimental effect on the users ability to enter a date in the input field, as Moment.js will expect the input to conform to the current format setting. See Moment's docs for clarification of some of the issues regarding date string parsing.

To get Moment.js to handle i18n output formatting, you need to load the appropriate Moment.js locale file. Moment will automatically default to the most recently loaded locale file. Explicit locale selection can be made programmatically by calling moment.locale("<key>") with the key of a loaded locale.

Testing

The coercion tests can be run after installing the required npm packages.

# From the command line:
$ npm install
$ npm test

Changelog

v2.0.0: WARNING: BREAKING CHANGES

This version represents a complete rewrite of the directive with the goal of having complete support for all of Pikaday's options, both in the provider and as attributes, whilst being more maintainable in the long run. The directive no longer applies it's own defaults, instead decorating the config object only when needed. The new build should be flexible, but still simple to use.

• Clarified naming of module and provider :
• Updated to support all of Pikaday config options, functions and callbacks
• Any option can now be added via pikadayConfigProvider
• Added coercion tests npm install; npm test
• Removed all defaults (directive will only apply attributes that are present)
• Added multiple locale selection
• Updated README.md