How to configure an exposed filter in a view using a date picker?

Question

How can I configure an exposed filter so that users can filter my site content by creation date, preferably using a date picker?

I tried using Content: Authored on as filter, but it gets me a text field to enter the date to enter a date/time in the yyyy-mm-dd hh:mm:ss format, which makes entering the date more difficult for users and more error prone.

What is the difference between Drupal 8 and Drupal 7 with Views 7.x-3?

Answer 1

You can use the Date Popup module.

Adds the native HTML 5 date popup widget to all date fields in views filters.

As the Use form element of type date instead textfield when selecting a date in an exposed filter is still in progress.

Answer 2

There is a new patch released a few days ago, I test it in a project and it works fine. Here is the issue:

Use form element of type date instead textfield when selecting a date in an exposed filter

Problem/Motivation

When adding a datetime exposed filter I cannot simply select a date - I have to manually enter a date which is very bad UX.

And the patch is the number 65

Answer 3

The Better Exposed Filters module integrates with the date type fields, including the date popup. You can use this module to easily add an exposed filter with the date popup.

Its in Beta for now but you can use it.

Answer 4

Add the jquery date picker in for that page as dependency. your_theme.libraries.yml

date-picker:
  js:
    script/site-datepicker.js : {}
  dependencies:
    - core/jquery
    - core/jquery.ui.datepicker

site-datepicker.js

Drupal.behaviors.customDatepicker = {
  attach: function (context, settings) {
    jQuery(function () {
      jQuery("#datepicker").datepicker({
        dateFormat: "dd-mm-yy",
        altField: "input[data-drupal-selector=edit-created]",
        altFormat: "yy/mm/dd 23:59:59"
      });
    });
  }
};

views-exposed-form--views-block-name.html.twig

{% if q is not empty %}
  {#
    This ensures that, if clean URLs are off, the 'q' is added first,
    as a hidden form element, so that it shows up first in the POST URL.
  #}
  {{ q }}
{% endif %}

<input id="datepicker" type="text">
<input data-drupal-selector="edit-created" data-msg-maxlength="This field field has a maximum length of 128." name="created" size="30" maxlength="128" aria-invalid="false" type="hidden">
{{ form|without('created') }}