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