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.
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');
2 comments:
Thank you so much for this piece of code! I'm wondering, how could i change the default $element['date']['#title'] (Date: ) to match my $form['start_date']['#title']?
Hi,
You can do it using hook_form_alter / myModule_date_popup_process().
In above example, instead of unset title, update title with new value.
Post a Comment