Pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

This module provides integration for Pickadate.js library in Drupal 7 to enhance date field collection beyond the standard picker for entity forms or custom Form API forms by providing a widget type and FormAPI element.

How to Use

First, you will need to download the Pickadate.js library. At the time of this writing, version 3.3.0 is supported. You will also need jQuery Update for jQuery version 1.8 or 1.7.

Place the pickadate folder into your libraries folder at libraries/pickadate.

Pickadate.js on GitHub: https://github.com/amsul/pickadate.js

FormAPI Element and Overriding Settings

To add Pickadate to your form or alter how an existing field acts:

In your Form API code or a hook_form_alter, set a field type to 'pickadate_date' or 'pickadate_time'. After that, give it a title, and most importantly, add a #settings key and call pickadate_date_default_settings() or pickadate_time_default_settings() appropriately.

This function populates the form element with default settings for the JS plugin. You can pass in an array to these functions to override the defaults to your liking.

Examples

$form['foo'] = array(
  '#type' => 'pickadate_date',
  '#title' => t('Date'),
  '#settings' => pickadate_date_default_settings(),
);

$form['bar'] = array(
  '#type' => 'pickadate_time',
  '#title' => t('Time'),
  '#settings' => pickadate_time_default_settings(),
);

$form['foo'] = array(
  '#type' => 'pickadate_date',
  '#title' => t('Date'),
  '#settings' => pickadate_date_default_settings(array('selectMonths' => TRUE, 'disable' => array(1,3,5), 'format' => 'mmmm d, yyyy'),
);

$form['bar'] = array(
  '#type' => 'pickadate_time',
  '#title' => t('Time'),
  '#settings' => pickadate_time_default_settings('interval' => 60),
);