Date Picker (Range)

Using the Filters add-on to display a calendar date range picker

The example below uses a date picker to select a date range and returns events active within the range. 

The Filters add-on for Ajax Load More can render a calendar date picker that allows users to query posts by custom field date.

Note: The Date Picker field type works for dates stored as custom field values only.

Example

Test the date range functionality by selecting a range between June 20, 2026, and July 8, 2026.

Select Date Range

    The Shortcodes

    The following shortcodes were used in the above example.

    Filters Shortcode[ajax_load_more_filters id="datepicker" target="alm_datepicker"] Ajax Load More Shortcode[ajax_load_more id="alm_datepicker" filters="true" target="datepicker" post_type="events" posts_per_page="3" meta_key="event_date" orderby="meta_value_num" order="ASC" button_label="Load More" no_results_text="Sorry, no events found between those dates."]

    Filter Group

    The screenshot below illustrates how to set up a date picker calendar in the Ajax Load More Filters admin.

    The admin for building date picker filters

    « Go back to Filters Add-on