Wednesday, June 4, 2014

Drupal date popup in custom form

Lets we see how to integrate date_popup on drupal custom form.
We can achieve it using drupal core functionality.
No need to go for jquery plugin.

Follow below 3 steps to achieve it :
1. custom form entry
2. hook_element_info_alter
3. Js for settings.

1. Create field in your custom form :
$form['birth_date'] = array(
 '#type' => 'date_popup',
 '#date_format' => 'd-m-Y',
 '#title' => t('Birth Date'),
 '#required' => TRUE,
 '#attributes' => array('class' => array('date-picker')),
);

2. hook_element_info_alter() to alter date_popup field. :
// For example :
date_popup by default come with time field. You can hide it.
Similarly you can hide description , title , etc ...
function myModule_element_info_alter(&$type) {
  if (isset($type['date_popup'])) {
    $type['date_popup']['#process'][] = 'myModule_date_popup_process';
  }
}


function myModule_date_popup_process($element, $form_state, $complete_form) {
  unset($element['date']['#description']);
  unset($element['date']['#title']);
  return $element;
}
3. Add below JS file settings. :
(function ($) {
  Drupal.behaviors.custom_js = {
    attach: function(context) {
      $('.date-picker').datepicker({   
        showOn: "both", // Another one option is "button".
        buttonImage: Drupal.settings.datePicker.iconPath + '/images/datepicker-icon.png',
        buttonImageOnly: true,
        dateFormat: "dd-mm-yy",
        changeMonth : true, // To edit month field.
        changeYear : true, // To edit date field.
        yearRange: "-120:",
      }); 
    }
  };
})(jQuery);


Final step is to create Drupal settings to hold theme_path to hold date picker icon image.
// We can get theme path using Drupal settings variable.
global $theme_path;
drupal_add_js(array('datePicker' => array('iconPath' => $theme_path)), 'setting');