Solved: Add icon trigger to the Date popup field

Hi,

You can do this via jquery like this:

$(document).ready(function() {
    $('#edit-expires-datepicker-popup-0').datepicker({   //Enter your field id
	showOn: "button",
	buttonImage: "images/calendar.gif",
	buttonImageOnly: true
    });
});

Make the following 3 changes to date_popup.module :

1) Add 'showOn' => 'button'

2) Uncomment 'buttonImage' => base_path() . drupal_get_path('module', 'date_api') ."/images/calendar.png"

3) Uncomment 'buttonImageOnly' => TRUE

in line 320 (below)

$settings = array(
'changeMonth' => TRUE,
'changeYear' => TRUE,
'firstDay' => intval(variable_get('date_first_day', 0)),
// 'buttonImage' => base_path() . drupal_get_path('module', 'date_api') ."/images/calendar.png",
// 'buttonImageOnly' => TRUE,
'autoPopUp' => 'focus',
'closeAtTop' => FALSE,
'speed' => 'immediate',
'dateFormat' => date_popup_format_to_popup(date_popup_date_format($element), 'datepicker'),
'yearRange' => $year_range,
// Custom setting, will be expanded in Drupal.behaviors.date_popup()
'fromTo' => isset($fromto),
);

Cheers!

I followed the instructions of Binu_Varghese. But the calendar icon only appears when you click on the date field. How can I show the icon on page load?

I'd refrain from hacking the module code for obvious reasons. As the popup gets initialized when the input field first gets focus, it wouldn't be of much use anyway if you want to show the icon as soon as the page is displayed.

You can add an icon or text to trigger the display of the popup with the popup theme function:

function yourtheme_date_popup($vars) {
  $element = $vars['element'];
  $attributes = !empty($element['#wrapper_attributes']) ? $element['#wrapper_attributes'] : array('class' => array());
  $attributes['class'][] = 'container-inline-date';
  // If there is no description, the floating date elements need some extra padding below them.
  $wrapper_attributes = array('class' => array('date-padding'));
  if (empty($element['date']['#description'])) {
    $wrapper_attributes['class'][] = 'clearfix';
  }
  // Add an wrapper to mimic the way a single value field works, for ease in using #states.
  if (isset($element['#children'])) {
    $element['#children'] = '<div id="' . $element['#id'] . '" ' . drupal_attributes($wrapper_attributes) .'>' . $element['#children'] . '<span class="date-popup-icon">' . t('Select date') . '</span></div>';
  }
  return '<div ' . drupal_attributes($attributes) .'>' . theme('form_element', $element) . '</div>';
}

The second step is to get the input field to get focus when the new element is clicked. Add a drupal behavior to do that:

(function ($) {
    Drupal.behaviors.datePopupIconActivate = {
      attach: function (context, settings) {
        $('.field-widget-date-popup').each(function() {
          var datepicker = $(this).find('input');
          $(this).find('.date-popup-icon').click(function() {
            datepicker.focus().focus();
          });
        });
      }
    };
})(jQuery);

Whats left to do is to add css for the new select button to fit your theme.

#1 Works for me. Thank you jayboodhun.

Instead of using js to add the options (as the solution above) you can use the following form api php either in your custom form module or using hook_form_alter for an existing form:

$form['example_datepicker'] = array(
  '#type' => 'date_popup',
  '#title' => t('Date picker'),
  '#datepicker_options' => array(
    'showOn' => 'both',
    'buttonImage' => base_path() . path_to_theme('my_theme') . '/images/icon/calendar.png',
    'buttonImageOnly' => true,
  ),
);

In reply to fcog's question #3:

The date pop-up is only initialised once the field has been given focus. However, this is no use if you want the user to use a button to open the date picker first time, instead of clicking in the field and it appearing.

A quick and dirty way to force this type of field to be "initialised" on page load would be to include some javascript like:

$('.form-type-date-popup').each(function (){
  $(this).find('.form-text').trigger('focus');
  $(this).find('.form-text').trigger('blur');
});

This will loop through each of the date_popup fields and force a focus (and then blur so it doesn't remain focussed) on the offending text field. It's not a particularly elegant solution, but it does work and it allows you to still use the rest of the built in functionality of the field type "date_popup" instead of having to manually add the date-picker js as in solution #1.

I solved this problem by doing below. #1 worked for me. But I just want to update the code of mine with some Drupal better code and correct implementation.

1. Add below code in your global.js file

jQuery( "#id_of_your_date_input_field" ).datepicker({
          showOn: "button",
          buttonImage:Drupal.settings.basePath + Drupal.settings.pathToTheme + "/images/calendar.png",
          buttonImageOnly: true
     });

2. if you want to do above changes for specific form then add below code in form alter or in custom form. Do not include in template.php because it will call every time.

/* Adding js for form */
  drupal_add_js('jQuery.extend(Drupal.settings, { "pathToTheme": "' . path_to_theme() . '" });', 'inline');

3. Now, do bit css for image.

Reply if above code didn't work for you.

I'm having the same issue as fcog in #3. I added the jQuery from #1, but my calendar image only appears when the input field receives focus. I tried #6 and #7, but the same issue. Has anyone overcome this issue?

I've achieved this by using #4 with some slightly changes:
I'll describe the process followed.
First of all create a javascript file with the following code and save it wherever you want (good choice is a "js" folder within your theme's folder):

(function ($) {
    Drupal.behaviors.datePopupIconActivate = {
      attach: function (context, settings) {
        $('.form-type-date-popup').each(function() {
          var datepicker = $(this).find('input');
          $(this).find('.date-popup-icon').click(function() {
            datepicker.focus().focus();
          });
        });
      }
    };
})(jQuery);

Then add the following code to your theme's template.php file changing the path in first line for your js file (the path should be relative to drupal root, see drupal_add_js()):

function yourtheme_date_popup($vars) {
  drupal_add_js('path/to/your/js/your_file.js');
  $element = $vars['element'];
  $attributes = !empty($element['#wrapper_attributes']) ? $element['#wrapper_attributes'] : array('class' => array());
  $attributes['class'][] = 'container-inline-date';
  // If there is no description, the floating date elements need some extra padding below them.
  $wrapper_attributes = array('class' => array('date-padding'));
  if (empty($element['date']['#description'])) {
    $wrapper_attributes['class'][] = 'clearfix';
  }
  // Add an wrapper to mimic the way a single value field works, for ease in using #states.
  if (isset($element['#children'])) {
    $element['#children'] = '<div id="' . $element['#id'] . '" ' . drupal_attributes($wrapper_attributes) .'>' . $element['#children'] . '<span class="date-popup-icon">' . t('Select date') . '</span></div>';
  }
  return '<div ' . drupal_attributes($attributes) .'>' . theme('form_element', $element) . '</div>';
}

Apply css to the .date-popup-icon class to match your visual requirements.

First of all i would like to express how stupid and poor decision that the jQuery UI date picker library developers made when they didn't provide an option to show the calendar icon or hide it on page display, this is simply stupid because from a usability perspictive, showing this image is much more usable than displaying it after clicking on some stupid text field, anyways, i came up with a very simple solution for this issue and i doesn't really need to alter or add anything except the following bunch of javascript code and a single line into wherever you're using the date_popup module:

First, write this javascript code into a file (name it m-datepicker.js or whatever) (note i am using an ID jQuery selector, not a CLASS, namely "edit-from-datepicker-popup-0", and "edit-to-datepicker-popup-0", you may change this as you wish):

jQuery(document).ready(function() {
  jQuery('#edit-from-datepicker-popup-0').after(jQuery('<button type="button" class="ui-datepicker-trigger"><img src="http://www.yoursite.com/images/calendar.png" alt="..." title="..." onclick="jQuery('#edit-from-datepicker-popup-0').focus();jQuery('#edit-from-datepicker-popup-0').trigger('click');" /></button>'));

The above code simply adds the missing calender icon and upon clicking on the image the rest will take place accordingly.

Finaly:
You need to add the above mentioned javascript file to your page using drupal_add_js, so it will look something like:

drupal_add_js('http://your.site.com/js/m-datepicker.js');

If anyone is interested in a contrib solution of the issue, have a look at Date Icon

#11 (dateicon module) is very useful, i highly recommend checking it out!

note: if you are using raw FAPI without the Fields module there are probably other points where you could set the type to 'dateicon' (see the readme for dateicon)... if using a date_combo with Fields, here's one way to set it... in the date_combo_process_alter hook:

function mymodule_date_combo_process_alter(&$element, &$form_state, $context) {
	//we don't want to show 'change date' icon or button on EVERY date combo in the website, just certain ones...
	$form = $context['form'];
	//in this example, will change to use dateicon on every date combo in xyz_form
	if ($form['#form_id'] == 'xyz_form') {
		$element['value']['#type'] = 'dateicon';
	}
}

and if you want to adjust the options (icon source etc.) when using dateicon, from the defaults in dateicon.module one way to do it is in a form after_build (using similar method to change the js settings as dateicon itself does)

eg:

$css_id = 'edit-field-to-date-und-0-value-datepicker-popup-0';

$js = drupal_add_js();
foreach ($js['settings']['data'] as $i => $data) {
	if (isset($data['datePopup'][$css_id]) && ($data['datePopup'][$css_id]['func'] == 'dateicon')) {
		//instead of the default dateicon behaviour  (showing a calendar icon), show a button labeled "Change Date"
		$data['datePopup'][$css_id]['settings']['buttonText'] = t('Change Date');
		$data['datePopup'][$css_id]['settings']['buttonImage'] = '';
		$data['datePopup'][$css_id]['settings']['buttonImageOnly'] = FALSE;
		
		drupal_add_js($data, 'setting');
		break;
	}
}		

#14 solved the issue thanks to @goatvirus.

function mymodule_date_combo_process_alter(&$element, &$form_state, $context) {
	//we don't want to show 'change date' icon or button on EVERY date combo in the website, just certain ones...
	$form = $context['form'];
	//in this example, will change to use dateicon on every date combo in xyz_form
	if ($form['#form_id'] == 'xyz_form') {
		$element['value']['#type'] = 'dateicon';
	}
}

how can i apply these simple step below for imputmask feature work to code above?

- Add  "#inputmask" => TRUE,  property to your element.
-- Additionally the mask format can be passed: "#inputmask" => 'dd-mm-yyyy', 

THANKS A LOT!