Webform date field format

Question

How do I change the date format of a date field in WEBFORM?

I have enabled popup calendar for this field, and when I select a date from the calendar, the default format is in Y-m-d which I want to change it to d-m-Y.

I do not see any configuration available in date field edit page.

Under configuration -> Date and time -> Short date type has the format "d M Y", I have tried updating this to d-m-Y but with no lock!

Help! Screenshots attached:

Answer 1

I was able to find the webform-calendar.tpl.php file that you used Drupal 7 - Change webform date select to textfield with calendar popup.

Basically what it does is adds a text field and hides the drop down date field.

I figuredout that the date field output is controlled in webform.js

You'll need to change from

  // Set up the jQuery datepicker element.
  $calendar.datepicker({
    dateFormat: 'yy-mm-dd',
    yearRange: startYear + ':' + endYear,
    firstDay: parseInt(firstDay),
    minDate: startDate,
    maxDate: endDate,
    onSelect: function (dateText, inst) {
      var date = dateText.split('-');
      $webformDatepicker.find('select.year, input.year').val(+date[0]).trigger('change');
      $webformDatepicker.find('select.month').val(+date[1]).trigger('change');
      $webformDatepicker.find('select.day').val(+date[2]).trigger('change');
    },
    beforeShow: function (input, inst) {
      // Get the select list values.
      var year = $webformDatepicker.find('select.year, input.year').val();
      var month = $webformDatepicker.find('select.month').val();
      var day = $webformDatepicker.find('select.day').val();

      // If empty, default to the current year/month/day in the popup.
      var today = new Date();
      year = year ? year : today.getFullYear();
      month = month ? month : today.getMonth() + 1;
      day = day ? day : today.getDate();

      // Make sure that the default year fits in the available options.
      year = (year < startYear || year > endYear) ? startYear : year;

      // jQuery UI Datepicker will read the input field and base its date
      // off of that, even though in our case the input field is a button.
      $(input).val(year + '-' + month + '-' + day);
    }
  });

to

  // Set up the jQuery datepicker element.
  $calendar.datepicker({
    dateFormat: 'dd-mm-yy', // changed
    yearRange: startYear + ':' + endYear,
    firstDay: parseInt(firstDay),
    minDate: startDate,
    maxDate: endDate,
    onSelect: function (dateText, inst) {
      var date = dateText.split('-');
      $webformDatepicker.find('select.year, input.year').val(+date[2]).trigger('change'); // changed
      $webformDatepicker.find('select.month').val(+date[1]).trigger('change');
      $webformDatepicker.find('select.day').val(+date[0]).trigger('change'); // changed
    },
    beforeShow: function (input, inst) {
          // Get the select list values.
          var year = $webformDatepicker.find('select.year, input.year').val();
          var month = $webformDatepicker.find('select.month').val();
          var day = $webformDatepicker.find('select.day').val();

          // If empty, default to the current year/month/day in the popup.
          var today = new Date();
          year = year ? year : today.getFullYear();
          month = month ? month : today.getMonth() + 1;
          day = day ? day : today.getDate();

          // Make sure that the default year fits in the available options.
          year = (year < startYear || year > endYear) ? startYear : year;

          // jQuery UI Datepicker will read the input field and base its date
          // off of that, even though in our case the input field is a button.
          $(input).val(day + '-' + month + '-' + year); // changed
        }
      });

4 lines changed, I marked them with // changed

Save the new file in /sites/themes/YOURTHEME/js/webform.js

You can use hook_js_alter to replace the JS file.

/*
 * Implements hook_js_alter
 */
function YOURTHEME_js_alter(&$javascript) {
  if (!empty($javascript['sites/all/modules/webform/js/webform.js'])) {
    $javascript['sites/all/modules/webform/js/webform.js']['data'] = drupal_get_path('theme', 'YOURTHEME') . '/js/webform.js';
  }
}

Answer 2

We can change using MYTHEME_webform_date ($variables) hook below reference url is there. You have to write this code in template.php

https://jamesdavidson.io/blog/how-reorder-date-format-webform-date-picker

Answer 3

If you want also update date via input, not only via datepicker. I extended code from above and added onChange function at the end:

$calendar.datepicker({
    dateFormat: 'dd.mm.yy', // changed
    yearRange: startYear + ':' + endYear,
    firstDay: parseInt(firstDay),
    minDate: startDate,
    maxDate: endDate,
    onSelect: function (dateText, inst) {
      var date = dateText.split('.');
      $webformDatepicker.find('select.year, input.year').val(+date[2]).trigger('change'); // changed
      $webformDatepicker.find('select.month').val(+date[1]).trigger('change');
      $webformDatepicker.find('select.day').val(+date[0]).trigger('change'); // changed
    },
    beforeShow: function (input, inst) {
          // Get the select list values.
          var year = $webformDatepicker.find('select.year, input.year').val();
          var month = $webformDatepicker.find('select.month').val();
          var day = $webformDatepicker.find('select.day').val();

          // If empty, default to the current year/month/day in the popup.
          var today = new Date();
          year = year ? year : today.getFullYear();
          month = month ? month : today.getMonth() + 1;
          day = day ? day : today.getDate();

          // Make sure that the default year fits in the available options.
          year = (year < startYear || year > endYear) ? startYear : year;

          // jQuery UI Datepicker will read the input field and base its date
          // off of that, even though in our case the input field is a button.
          $(input).val(day + '.' + month + '.' + year); // changed
    }
  }).on('change', function(ev) {  // new
    var date = $(ev.target).val().split('.'); // new
    $webformDatepicker.find('select.year, input.year').val(+date[2]).trigger('change'); // new
    $webformDatepicker.find('select.month').val(+date[1]).trigger('change'); // new
    $webformDatepicker.find('select.day').val(+date[0]).trigger('change'); // new
  });