This blog describes how to add date pop-up calender to a custom form in the Drupal 7.
The use case is if you want to use date pop-up calendar in a custom form, then how you can do it in the drupal 7. Actually, the drupal 7 form API provides lots of form types like textfield, checkbox, checkboxes etc to create a custom form. Similarly, the date module also provides the form type called date_popup. We can use it in the custom form in order to display the date pop-up in the custom form.
Let consider the below code snippet:
function phponwebsites_menu() {
$items = array();
$items['customform'] = array(
'title' => t('Custom Form'),
'type' => MENU_CALLBACK,
'page callback' => 'drupal_get_form',
'page arguments' => array('phponwebsites_display_date_popup_form'),
'access callback' => TRUE,
);
return $items;
}
function phponwebsites_display_date_popup_form($form, &$form_state) {
$form['date'] = array(
'#type' => 'date_popup',
'#default_value' => date('Y-m-d'),
'#date_format' => 'Y-m-d',
'#date_year_range' => '0:+5',
'#datepicker_options' => array('minDate' => 0, 'maxDate' => 0),
);
return $form;
}
Where,
'#date_format' => 'Y-m-d' if you need to display only date
'#date_format' => 'Y-m-d H:i:s' if you need to display date & time
'#date_year_range' => '0:+5' if you need to display only future 5 years
'#datepicker_options' => array('minDate' => 0, 'maxDate' => 0) if you want to display only current date. We can hide the future & past dates using this option.
Please add the above code into your module file and look into the "customform" page. It looks like the below image:
Now I've hope you know how to add date pop-up calendar with custom form in the drupal 7.
The use case is if you want to use date pop-up calendar in a custom form, then how you can do it in the drupal 7. Actually, the drupal 7 form API provides lots of form types like textfield, checkbox, checkboxes etc to create a custom form. Similarly, the date module also provides the form type called date_popup. We can use it in the custom form in order to display the date pop-up in the custom form.
Use date pop-up calendar with the custom form in drupal 7:
Let consider the below code snippet:
function phponwebsites_menu() {
$items = array();
$items['customform'] = array(
'title' => t('Custom Form'),
'type' => MENU_CALLBACK,
'page callback' => 'drupal_get_form',
'page arguments' => array('phponwebsites_display_date_popup_form'),
'access callback' => TRUE,
);
return $items;
}
function phponwebsites_display_date_popup_form($form, &$form_state) {
$form['date'] = array(
'#type' => 'date_popup',
'#default_value' => date('Y-m-d'),
'#date_format' => 'Y-m-d',
'#date_year_range' => '0:+5',
'#datepicker_options' => array('minDate' => 0, 'maxDate' => 0),
);
return $form;
}
Where,
'#date_format' => 'Y-m-d' if you need to display only date
'#date_format' => 'Y-m-d H:i:s' if you need to display date & time
'#date_year_range' => '0:+5' if you need to display only future 5 years
'#datepicker_options' => array('minDate' => 0, 'maxDate' => 0) if you want to display only current date. We can hide the future & past dates using this option.
Please add the above code into your module file and look into the "customform" page. It looks like the below image:
Now I've hope you know how to add date pop-up calendar with custom form in the drupal 7.
Related articles:
Remove speical characters from URL alias using pathauto module in Drupal 7
Add new menu item into already created menu in Drupal 7
Add class into menu item in Drupal 7
Create menu tab programmatically in Drupal 7
Add custom fields to search api index in Drupal 7
Clear views cache when insert, update and delete a node in Drupal 7
Create a page without header and footer in Drupal 7
Login using both email and username in Drupal 7
Disable future dates in date pop-up calendar Drupal 7
Update multiple fields using #ajax in Drupal 7
Remove speical characters from URL alias using pathauto module in Drupal 7
Add new menu item into already created menu in Drupal 7
Add class into menu item in Drupal 7
Create menu tab programmatically in Drupal 7
Add custom fields to search api index in Drupal 7
Clear views cache when insert, update and delete a node in Drupal 7
Create a page without header and footer in Drupal 7
Login using both email and username in Drupal 7
Disable future dates in date pop-up calendar Drupal 7
Update multiple fields using #ajax in Drupal 7
I enjoyed over read your blog post. Your blog have nice information,
ReplyDeleteI got good ideas from this amazing blog.
Your article is easy to understand, the simple way of communicating is accessible to the majority of people. I will keep track of your posts regularly.
ReplyDeleteThanks, really helpful.
ReplyDeleteI have a similar interest this is my page read everything carefully and let me know what you think. Black satta king
ReplyDelete