pikaday-angular ^v2.0.0

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

Basic usage

// Include the pikaday-angular module as a dependency.
angular.module('YourApp', ['pikaday']);

<!-- Include the `pikaday` attribute and assign a named scope model. -->
<input pikaday="example.myPickerObject">

You can now use any of Pikaday's functions from the exposed model, such as myPickerObject.getDate().

<input pikaday="example.myPickerObject"> Date = {{ example.myPickerObject.getDate() | date:'fullDate' }}

Example: Date = {{ example.myPickerObject1.getDate() | date:'fullDate' }}

Attributes

Any of Pikaday's configuration options can be passed to a corresponding attribute. pikaday-angular takes care of coercing the values to the proper type for boolean values and dates, and binds function expression references for callbacks. See Functions ⤵

<input pikaday="example.myPickerObject" default-date="01/03/1988" set-default-date="true">

Example:

Global config

You can configure all pickers globally by including a pikadayConfigProvider in you project.

angular.module('YourApp')
  .config(['pikadayConfigProvider', function(pikaday) {
    pikaday.setConfig({
      format: "MM/DD/YYYY"
    });
  }])

All the pickers on this page are using the "MM/DD/YYYY" format, which can be overridden with an inline attribute.

<input pikaday="example.myPickerObject" format="MMMM Do YYYY">

Example:

Functions

Functions defined in the controller can be passed to Pikaday's defined events and filters as callbacks via attributes.
Available Events: onSelect onOpen onClose onDraw
Filter: disableDayFn

There are 2 predefined, named arguments that can be passed with the callback.

To use it, define a function in your controller:

angular.module('YourApp')
  .controller('exampleController', function() {
    this.onPikadaySelect = function onPikadaySelectFn(pikaday) {
      alert(pikaday.toString());
    };
  });

Then pass it to the Pikaday picker with either or both of the predefined arguments.

<input pikaday="example.myPickerObject" on-select="example.onPikadaySelect(pikaday)">

Example:

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' ));
    };
  });

Example:

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

  });
}])

Then defining the language is as simple as passing the string reference you defined in the locales object.

<input pikaday="example.myPickerObject" i18n="de">

Example: