11

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?

  • Have you just tried adding one of the "Content: Created" filters (there are different flavors) and exposing it? – mpdonadio May 11 '16 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 '16 at 20:05
  • Went by memory. Does "Content: Authored on" work? – mpdonadio May 11 '16 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 '16 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 '16 at 22:02
5

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.

1

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

1

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.

  • 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. – aaronbauman Sep 26 '18 at 21:03
1

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, privacy policy and cookie policy

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