pikaday-angular working examples

Tested and working with Pikaday Release version 1.2.0

pikaday-angular is an AngularJS directive wraper that aims to make using Pikaday with Angular as simple as possible, exposing Pikaday's configurable features as HTML attributes, handled by the directive.

Pikaday source code & documentation

Basic usage

Include the angularPikaday module as a dependency.

app = angular.module('YourApp', ['angularPikaday'])

Include the pikaday attribute and assign a scope.

<input pikaday="myPickerObject">

The date string returned to the input field will be pre-formatted by Pikaday, although formatting can be configured manually with the format attribute, if moment.js is included.

i18n

If you want to customize the used wordings, you can inject a custom object via the pikadayProvider.

Example:

angular.module('YourApp', ['angularPikaday'])
  .config(['pikadayProvider', function(pikadayProvider) {
    pikadayProvider.setConfig({
      i18n: {
        previousMonth : 'Previous Month',
        nextMonth     : 'Next Month',
        months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
        weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
        weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
      }
  })
}])

Methods

pikaday-angular binds the Pikaday picker object to the named scope and supports several methods for retrieving and updating the date.

For example, the myPickerObject.getDate() method can be user to retrieve a JavaScript Date object, which can easily be formatted using Angular.js' built in formatters.

<span> Date = {{ myPickerObject.getDate() | date:'MM/dd/yyyy' }}</span>

To see a complete list of methods available to the Pikaday object, check out the Pikaday README on Github.

Available attributes

pikaday-angular accepts most of Pikaday's configuration options as HTML attributes.

• trigger use a different element to trigger opening the datepicker, see trigger example (defaults to directive DOM element)
• bound automatically show/hide the datepicker on field focus (default true)
• position preferred position of the datepicker relative to the form field, e.g.: top right, bottom right Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport.
• format the default output format for .toString() and field value (requires Moment.js for custom formatting)
• default-date the initial date to view when first opened
• set-default-date make the defaultDate the initial selected value
• first-day first day of the week (0: Sunday, 1: Monday, etc)
• min-date the minimum/earliest date that can be selected
• max-date the maximum/latest date that can be selected
• year-range number of years either side of the year select drop down (e.g. 10) or array of upper/lower range (e.g. [1900,2012])
• is-r-t-l reverse the calendar for right-to-left languages (default false)
• year-suffix additional text to append to the year in the title
• show-month-after-year render the month after year in the title (default false)

In addition a custom onSelect handler can be passed - it is invoked with the Pikaday instance as sole argument.

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

Check out the demo for some other examples.