How to reorder the date format of a Webform date-picker

EDIT: Nicholas Thompson messaged me to let me know of his solution to this issue which can be found here, it's probaby a better and more Drupally way of acheiving the same thing!

In this post I'm going to explain how you can reorder the date format of the date picker in a Webform. By default the format is m/d/y which if you're a non-American is not ideal!

To do this you'll need to overwrite the theme_webform_date theme function found in the date.inc file of the webform module.

This is how this theme function looks by default:

/**
 * Theme a webform date element.
 */
function theme_webform_date($variables) {
  $element = $variables['element'];

  $element['year']['#attributes']['class'] = array('year');
  $element['month']['#attributes']['class'] = array('month');
  $element['day']['#attributes']['class'] = array('day');

  // Add error classes to all items within the element.
  if (form_get_error($element)) {
    $element['year']['#attributes']['class'][] = 'error';
    $element['month']['#attributes']['class'][] = 'error';
    $element['day']['#attributes']['class'][] = 'error';
  }

  $class = array('webform-container-inline');

  // Add the JavaScript calendar if available (provided by Date module package).
  if (!empty($element['#datepicker'])) {
    $class[] = 'webform-datepicker';
    $calendar_class = array('webform-calendar');
    if ($element['#start_date']) {
      $calendar_class[] = 'webform-calendar-start-' . $element['#start_date'];
    }
    if ($element['#end_date']) {
      $calendar_class[] = 'webform-calendar-end-' . $element['#end_date'];
    }
    $calendar_class[] ='webform-calendar-day-' . variable_get('date_first_day', 0);

    $calendar_options = array(
      'component' => $element['#webform_component'], 
      'calendar_classes' => $calendar_class
    );
    $calendar = theme('webform_calendar', $calendar_options);
  }

  $output = '';
  $output .= '<div class="' . implode(' ', $class) . '">';
  $output .= drupal_render_children($element);
  $output .= isset($calendar) ? $calendar : '';
  $output .= '</div>';

  return $output;
}

I want to overwrite this theme function, so I'm going to copy and paste this section of code into my theme template.php and rename it to MYTHEME_webform_date. Now I can begin to alter how the date is displayed.

The three keys of the elements variable I'm interested in are month, day and year. As default the order of those keys is month then day then year. To alter how they're rendered we're going to have to remove them and re-add them in the order we want, to do that I'll add the following code:

$day = $element['day'];
$month = $element['month'];
$year = $element['year'];
  
unset($element['day']);
unset($element['month']);
unset($element['year']);
  
$element['day'] = $day;
$element['month'] = $month;
$element['year'] = $year;

Firstly I extract the data from the array, then I unset them, then I re-add them in the order I want. Now when view my webform again - the date picker is displayed in a non-US format!

Here's the full theme function with my code added in:

/**
 * Reorder the dates to d/m/y not m/d/y
 */
function MYTHEME_webform_date($variables) {
  $element = $variables['element'];

  //Save the data from the array into variables.
  $day = $element['day'];
  $month = $element['month'];
  $year = $element['year'];
  
  //Remove these keys from the array.
  unset($element['day']);
  unset($element['month']);
  unset($element['year']);
  
  //Re-add the data to the array in the correct order.
  $element['day'] = $day;
  $element['month'] = $month;
  $element['year'] = $year;
  
  $element['year']['#attributes']['class'] = array('year');
  $element['month']['#attributes']['class'] = array('month');
  $element['day']['#attributes']['class'] = array('day');

  // Add error classes to all items within the element.
  if (form_get_error($element)) {
    $element['year']['#attributes']['class'][] = 'error';
    $element['month']['#attributes']['class'][] = 'error';
    $element['day']['#attributes']['class'][] = 'error';
  }

  $class = array('webform-container-inline');

  // Add the JavaScript calendar if available (provided by Date module package).
  if (!empty($element['#datepicker'])) {
    $class[] = 'webform-datepicker';
    $calendar_class = array('webform-calendar');
    if ($element['#start_date']) {
      $calendar_class[] = 'webform-calendar-start-' . $element['#start_date'];
    }
    if ($element['#end_date']) {
      $calendar_class[] = 'webform-calendar-end-' . $element['#end_date'];
    }
    $calendar_class[] ='webform-calendar-day-' . variable_get('date_first_day', 0);

    $calendar_options = array(
      'component' => $element['#webform_component'], 
      'calendar_classes' => $calendar_class
    );
    $calendar = theme('webform_calendar', $calendar_options);
  }

  $output = '';
  $output .= '<div class="' . implode(' ', $class) . '">';
  $output .= drupal_render_children($element);
  $output .= isset($calendar) ? $calendar : '';
  $output .= '</div>';

  return $output;
}

Drupal 7

Webform

Date Format

Theme

Comments

Very good :))
Thank you very much!

Thx for your code m8, there is a small typo on line 50, close the line with a ;

grts

Thanks Frederic, I've fixed that now!

Actually this is more simple:

function hook_form_alter(&$form, &$form_state, $form_id)
{
$form['submitted']['from_date']['#process'][] = '_process_date';
$form['submitted']['to_date']['#process'][] = '_process_date';
}

function _process_date(&$element)
{
$element['month']['#weight'] = 10;
$element['day']['#weight'] = 0;
return $element;
}