15

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?

6
  • Have you just tried adding one of the "Content: Created" filters (there are different flavors) and exposing it?
    – mpdonadio
    May 11, 2016 at 19:56
  • Not able to find "Content: Created" filter. Have "Content: Authored on", "content revision: Authored on" and "Taxonomy term: Post date" only.
    – Sam
    May 11, 2016 at 20:05
  • Went by memory. Does "Content: Authored on" work?
    – mpdonadio
    May 11, 2016 at 20:06
  • "Content: Authored on" gives a input box for users to enter date in yyyy-mm-dd hh:mm:ss format, which is too complicated. How to show a date, month and year dropdown or date picker?
    – Sam
    May 11, 2016 at 20:11
  • 3
    That isn't supported yet, drupal.org/node/2648950 I'm hoping that gets wrapped up this week and into 8.2.x.
    – mpdonadio
    May 11, 2016 at 22:02

4 Answers 4

12

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.

3

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

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.

1
  • 1
    In case you're using entity api to add fields (via BaseFieldDefinitions), instead of field api: BEF does not work for datetime fields, only works for timestamps. Sep 26, 2018 at 21:03
2

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') }}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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