How do I change date format in View Exposed Date filter? By default it's in d/m/Y format, I want to make it Y.m.d format, without changing the query parameter date format (Y-m-d). enter image description here

Any suggestion, how can I achieve this?

  • Are you using Date popup or some similar module that changes Exposed Date fields?
    – prkos
    Jun 16 '18 at 2:03
  • Yes, I am using Date Popup module. But There is no option to change date format in Date Popup. Jun 18 '18 at 6:17
  • There is no configuration for Date Popup module, as you said. Maybe adding multilingual features to choose different format for different languages would be a good idea. Will you submit it? drupal.org/project/issues/…
    – prkos
    Jun 18 '18 at 17:14
  • This depends on the language defined by the user for her.his operating system. Some websites bypass this by splitting the field in 3 separated fields. E.g. Yahoo subscribe form goo.gl/qv7QFn Jul 17 '18 at 7:26

To make it easy let's disable Drupal datepicker and make it with javascript.

First disable jquery ui datepicker from exposed filter (like picture below) enter image description here

Then create a module with libraries in file my_module.libraries.yml like below

  version: 1.x
    https://code.jquery.com/ui/1.12.0/jquery-ui.min.js: { type: external, minified: true }
    js/datepicker.js: {}

And in our my_module.module let's alter the exposed form and add line below :

  function my_module_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id){
     if ($form_id == 'views_exposed_form') {
      $form['field_date_value']['#type'] = 'textfield';
      $form['field_date_value']['#attributes']['class'][] = 'datepicker-text';
      $form['field_date_value']['#attributes']['placeholder'] = 'yyyy-dd-mm';
      $form['#attached']['library'][] = 'd8/d8_datepicker';
      $form['#validate'][] = 'my_exposed_validate';

In our validate form function we will change date from our custom format to format needed by drupal :

function my_exposed_validate(&$form, \Drupal\Core\Form\FormStateInterface $form_state) {
  if(!empty($form['field_date_value']['#value'])) {
    $dt = date_create_from_format('Y-d-m', $form['field_date_value']['#value']);
    if($dt!==FALSE) {
      $value = $dt->format("Y-m-d");
      $form_state->setValue('field_date_value', $value);

And finaly in our file datepicker.js add this line :

(function($) {
    $('.datepicker-text').datepicker({ dateFormat: 'yy-dd-mm' });

Hope this helpful and if you wan't to go further, alter a form validation to check if the format sended is date or not ;)

  • Awesome It is working as expected, Only one issue "Query Parameter date format " is also changing from "Y-m-d" to "Y.m.d". So my views stop working, how can I fix this, Any Idea? Jul 17 '18 at 11:33
  • @visabhishek I edit my comment Jul 18 '18 at 16:04
  • 1
    Regarding the library definition, instead of loading the jquery UI js file, consider using the existing dependency: dependencies: - core/jquery.ui.datepicker
    – user20765
    Jan 16 '20 at 11:45

Drupal 8 uses html5 date fields and can have custom (browser) settings. The format you see is 'dd/mm/yyyy'. Users surfing with Chrome using default language will see 'mm/dd/yyyy'. The advantage here is that the browser uses their default pop-up for date fields and you do not have to add them yourself.
So in order to achieve what you want, you would have to do something custom, this could help as a starter http://form.guide/html5/html-input-type-date-format.html.
Keep in mind that date fields have validators that expect the HTML5 format on the backend.


In Drupal 8, Better Exposed Filter - To change the date format in jQuery Calender,use the following,

In custom module -

function MODULE_NAME_js_alter(&$js) {
  $js['settings']['data'][] = array('better_exposed_filters'=> array('bef_dateformat'=>'dd/mm/yy'));

In Js -

$('.bef-datepicker').datepicker({ dateFormat: 'dd/mm/yy' });

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.