Back to top

Date Popup—Views Exposed Filter in Drupal 8

Date Popup Views Exposed Filter for Drupal 8

The default Views Exposed Filter format for Date fields (for example the Authored on field) leaves a lot to be desired in terms of usability.

This can be greatly improved with one of two additional modules—Better Exposed Filters if you're already using it for other parts of your site, or Date Popup for a superior experience.

Improve default Exposed Date Filter with meaningful Label and Description

Without a Label explaining what the filter is about and a Description noting what format the date should be entered in the Filter is almost unusable.

Depending on whether you want the Date to be entered in absolute or relative format (Value type), and what Operator you want to apply your Date Filter settings might look something like this:

Exposed Date Filter (Authored on) settings

The output is a simple text field where you have to type in the date.

Default Date Exposed Filter in Drupal 8 Views

The format doesn't seem to be strict, you can use slashes instead of dashes as separators and it would still work. But it is still far from convenient.

Better Exposed Filters Datepicker

If you're already using the Better Exposed Filters module in your project you can activate it in your Views to use the jQuery UI Datepicker option on your Date Filter:

Better Exposed Filter jQuery UI Datepicker setting

to get a nice calendar popup when you focus the filter input field. All you have to do is click on a day on the calendar and the date appears in the field. It's formatted with slashes so you might want to adjust the Description to match it. If you select the wrong day simply click again and choose another one.

Better Exposed Filter jQuery UI Datepicker Calendar

For those who aren't using the mouse they simply type in the date. To clear the field you have to delete the text.

You can't specify time in addition to the date when using this widget, so keep it in mind if higher granularity is important to you.

Date Popup

Date Popup module offers a more polished look and some more usability features. You simply have to enable the module to turn Exposed Date Filters into calendar widgets with this module, there are no special settings for it.

Make sure you don't have the Better Exposed Filters jQuery UI Datepicker enabled at the same time as they would both be triggered at the same time. You can use the Default (Views render element) on Date Exposed Filters if you have to use Better Exposed Filters on other fields but Date Popup on Date filters.

Date Popup Exposed Filter

Besides looking nicer Date Popup module adds improvements for those who like (or need) to use the keyboard instead of a mouse. Arrow keys allow you to focus individually month, day, or year entry (← Left and Right →), and increase (↑ Up) or decrease (↓ Down) values by one.

Typing directly also works, shifting focus automatically to reduce the number of keystrokes necessary.

There's also a convenient button to clear the field with one click.

These additions make it easier for your visitors to interact with your site which makes them well worth the time of setting up.

Would you like me to help you with setting this up? Or with any other Drupal problem? Please contact me and I'll summon all my skills and Drupal might to solve it for you.