Date Range
Overview
Filter content by start date, end date, or both.
Available options
Name | Description |
---|---|
Data source | Where the value lives (taxonomy, custom field, post attribute). If you also set an “Other data source”, this value will be used for the Start Date. |
Other data source | Use this setting if you want to use a separate value for the End Date. |
Compare type | This setting is only relevant when the Other data source setting is in use. It determines how the range of the post’s two data source values is compared to the user-selected range. Note that for all compare types, <= and >= comparisons are used:
|
Fields to show | “Start + End Dates”, “Exact Date”, “Start Date”, or “End Date”.
If you use two data sources, it is recommended to set this setting to “Start + End Dates”. If you choose “Start Date” or “End Date”, only that date is compared. If you choose “Exact Date”, the comparison will use that date for both the upper and the lower limit of the user range. |
Display format | The front-facing date (see Formatting tokens) |
Formatting tokens
d
– day (2 digits)j
– day (without leading zeros)m
– month number (2 digits)n
– month number (without leading zeros)F
– month (full)M
– month (short)y
– year (last 2 digits)Y
– year (full)
Examples:
Y-m-d
– 2021-01-18F j, Y
– January 18, 2021j M Y
– 18 Jan 2021
Value storage and emtpy post range values
If a Date Range facet uses two data sources, the lower value is stored as facet_value
, and the upper value is stored as facet_display_value
in the index table.
There are a few things to keep in mind in this situation:
- If a post has no date set for the first (main) data source field, the post will not be indexed, so it will never appear in the results. The same is true for posts that do not yet have this field set in the database because they have not been saved after adding the custom field in (for example) Advanced Custom Fields.
- If a post has no date set for the second data source field, or if that field has not yet been saved for the first time, the post will be indexed but the date for the post’s range upper limit will then be set to
0
. This may lead to unexpected or illogical results, depending on the “Compare type” you have set for the facet.
To prevent the above situations, make sure that if you use two data source fields, all posts actually have two dates set.
Emtpy Start Date or End Date fields
What happens if a Date Range facet uses two data sources, and a user does not enter a date into the “Start Date” or “End Date” field? It depends on the “Compare type” you have set:
- If the facet’s “Compare type” is set to “Basic”, only the field which has a date entered is used in the comparison.
- If the facet’s “Compare type” is set to “Enclose” or “Intersect”, an empty “Start Date” field will be compared as
0000-00-00
and an empty “End Date” field as3000-12-31
. Note that in this case, setting “Enclose” as “Compare type” will lead to 0 results, as the post’s range will never surround these user range dates.
Translate the calendar and dates
With the following code you can translate the calendar and range dates to your site’s language.
Make sure to replace my_date_range_facet
with the name of your Date Range facet (the name that is used in the facet’s shortcode), on lines 2 and 3.
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_render_output', function( $output, $params ) { if ( isset( $output['settings']['my_date_range_facet'] ) ) { $output['settings']['my_date_range_facet']['locale'] = [ 'weekdays_short' => [ 'Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds' ], // abbreviations for Sun to Sat 'months_short' => [ 'Gen', 'Febr', 'Març', 'Abr', 'Maig', 'Juny', 'Jul', 'Ag', 'Set', 'Oct', 'Nov', 'Des' ], // abreviations for months Jan to Dec 'months' => [ 'Gener', 'Febrer', 'Març', 'Abril', 'Maig', 'Juny', 'Juliol', 'Agost', 'Setembre', 'Octubre', 'Novembre', 'Desembre' ], // full names of months Jan to Dec 'firstDayOfWeek' => 1, // 1 is Monday, 0 is Sunday 'clearText' => 'Clear' // text for clear button ]; } return $output; }, 10, 2 );
Change or translate the placeholder texts
If you want to change the placeholder texts “Date”, “Start Date” and “End Date”, you can use the facetwp_i18n hook.
To translate them, you can also use a translation plugin like Loco Translate, or use the gettext
WordPress filter by adding the following code to your (child) theme’s functions.php:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'gettext', function( $translated_text, $text, $domain ) { if ( 'fwp-front' == $domain ) { if ( 'Date' == $translated_text ) { $translated_text = 'Event date'; } elseif ( 'Start Date' == $translated_text ) { $translated_text = 'Start event'; } elseif ( 'End Date' == $translated_text ) { $translated_text = 'End event'; } } return $translated_text; }, 10, 3 );
Customize the date picker range
The following code forces the range of the date picker between a specific date and today:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
// Replace "my-daterange-facet" with the name of your Date Range facet add_filter( 'facetwp_render_output', function( $output, $params ) { $output['settings']['my-daterange-facet']['range']['min']['minDate'] = '2022-01-01'; $output['settings']['my-daterange-facet']['range']['min']['maxDate'] = date( 'Y-m-d' ); // Today return $output; }, 10, 2 );