How to replace the date field selects with one text field in Drupal 7 web forms

Question

I am using webforms in Drupal 7. Is there a way to set the date field to a single textfield instead of 3 select fields?

Answer 1

Since it seems like the webfrom module doesn't support this functionality yet, if found that the easiest way to do this, was to use a textfield and use form_alter to add the datepicker plugin.

function custom_form_form_alter(&$form, &$form_state, $form_id) {

  if($form_id != 'webform_client_form_2') return;

  // Alter textfield for date to integrate popup calendar
  $form["submitted"]["expected_move_date"] = array(
    '#type' => 'item',
    'finished_after' => array(
      '#type' => 'textfield',
      '#attributes' => array('class' => array('datepicker')),
      '#required' => TRUE,
    )
  );

  $form['#after_build'] = array('custom_form_uidatepicker');

}

function custom_form_uidatepicker($form, $form_state) {
  drupal_add_library('system', 'ui.datepicker');
  drupal_add_js("(function ($) { $('.datepicker').datepicker({
      showOn: 'both',
      buttonImage: 'sites/all/modules/custom/custom_form/images/calendar.png',
      buttonImageOnly: true,
      dateFormat: 'dd/mm/yy',
    });
    $('.datepicker').datepicker( 'option', 'minDate', 'd' );
    })(jQuery);", array('type' => 'inline', 'scope' => 'footer', 'weight' => 5));

    return $form;
}

Answer 2

It might be best to use the webform_scheduler as that has the date popup dialog already installed. More details from the module's project page:

It adds an optional start date and end date field to the webform form settings. If the current date and time falls outside the specified window, the webform is disabled.