1

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:

enter image description here enter image description here enter image description here enter image description here

  • What field type are you using on date sent? I ask because the time and date field is suppose to look like this. You also say I have enabled popup calendar for this field, so what contrib module are you using? – No Sssweat Jun 23 '18 at 8:48
  • @NoSssweat, I have not used any contrib module, I have used the "Date" type that was already available for webform Form components. When I edit this field, had an option "Enable popup calendar" checkbox under Display fieldset. I then have added a template file "webform-calendar.tpl.php" in the templates folder in my theme (Found this tpl file in google). That's all configuration I have made for this Date field. screenshots attached in the question. – Maddy Jun 26 '18 at 3:58
2

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';
  }
}
  • Hi, this is great! that's the exact tpl.php lines I have used. Is there a way I can do this without having to patch original contrib module? Really appreciate your help. – Maddy Jul 4 '18 at 6:23
  • @Maddy actually there is, never had this situation before. I found out you can using hook_js_alter. – No Sssweat Jul 4 '18 at 6:47
0

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

  • Hi, the link you provided mentions to use a different approach to achieve this, I tried doing that, but still no luck. It does not change the date format. – Maddy Jun 26 '18 at 3:51
  • hi, when I use Date in 3 parts format, the date format is in d-m-Y, but when I enable "popup calendar" and with the webform-calendar.tpl.php fil, the date format is Y-m-d (single textfield with popup calendar) – Maddy Jun 26 '18 at 4:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.