Field Render

Display a Date Range Picker using an enhanced version of the Daterangepicker library. The field support a wide range of customization, such as: Placeholder, Default dates, Range Restriction, Date restriction, No weekends etc…

Field Group

Field Settings

Setting nameDescription
Display FormatThe format displayed when editing a post
Return FormatThe format returned via template functions
Week Starts OnChoose the first day of the week
PlaceholderDefault text displayed in the input
SeparatorThe serpator between start date & end date
Default DateThe default date range value
Range RestrictionChoose the minimum and maximum number of days to select
Date Restriction
Choose the minimum and maximum date to be selectable. Relative dates are compatible.
Custom Ranges
Display predefined ranges: Today, Yesterday, Last 7 Days, last 30 Days, This Month & Last Month
Show Dropdowns
Show month and year dropdowns
No Weekends
Disable weekends
Auto Close on Selection
Automatically close the modal when a date is selected
Allow Null
Allow user to clear a date

Field Value

Sub fields meta {field_name}_start & {field_name}_end will be generated based on the field name. For example, for the field name my_date_range, the following meta will hold the start/end values: my_date_range_start & my_date_range_end.

Values are compiled when using the get_field() function on the main field name. Sub fields will also return their respective values.

Return Format: d/m/Y

$date_range = get_field('date_range');
 * array(
 *     'start' => '24/04/2021',
 *     'end'   => '28/04/2021'
 * )
$date_range_start = get_field('date_range_start');
// 24/04/2021
$date_range_end = get_field('date_range_end');
// 28/04/2021

Unformatted Value

Just like the ACF Date Picker Field, the Date Range Picker values are saved using the Ymd format allowing to easily perform WP Query.

$date_range = get_field('date_range', false, false);

 * array(
 *     'start' => '20210424',
 *     'end'   => '20210428'
 * )
$date_range_start = get_field('date_range_start', false, false);

// 20210424
$date_range_end = get_field('date_range_end', false, false);

// 20210428

Javascript Hooks

The field comes with a collection of hooks allowing developers to customize the field behavior. It is recommended to use the acf/input/admin_enqueue_scripts hook to enqueue a custom ACF JS file. See documentation.

Date Range Picker Arguments

This options are passed to the Daterangepicker library to initialize the field.

 * acfe/fields/date_range_picker/args
 * @object  args   Daterangepicker arguments
 * @object  field  ACF Field instance
filter('acfe/fields/date_range_picker/args',                            args, field);
filter('acfe/fields/date_range_picker/args/name=my_date_range',         args, field);
filter('acfe/fields/date_range_picker/args/key=field_608abfa17fa7f',    args, field);
acf.addFilter('acfe/fields/date_range_picker/args/name=my_date_range', function(args, field){

    // change the minimum date
    args.minDate = '28/04/2021';
    return args;


Date Range Picker Init

This action is triggered right after the field initialization, allowing developers to perform specific actions.

 * acfe/fields/date_range_picker/init
 * @object  $input  jQuery input object
 * @object  field   ACF Field instance
action('acfe/fields/date_range_picker/init',                            $input, field);
action('acfe/fields/date_range_picker/init/name=my_date_range',         $input, field);
action('acfe/fields/date_range_picker/init/key=field_608abfa17fa7f',    $input, field);
acf.addAction('acfe/fields/date_range_picker/init/name=my_date_range', function($input, field){

    // retrieve the daterangepicker object
    var daterangepicker = $'daterangepicker');


Date Range Picker Invalid Date

This filter is applied to all dates in the calendar allowing developers to set specific dates as unavailable. Please note that the date variable is a MomentJS object.

 * acfe/fields/date_range_picker/is_invalid
 * @bool    isInvalid   Whenever the date is invalid or not
 * @object  date        MomentJS date object
 * @object  $input      jQuery input object
 * @object  field       ACF Field instance
filter('acfe/fields/date_range_picker/is_invalid',                          isInvalid, date, $input, field);
filter('acfe/fields/date_range_picker/is_invalid/name=my_date_range',       isInvalid, date, $input, field);
filter('acfe/fields/date_range_picker/is_invalid/key=field_608abfa17fa7f',  isInvalid, date, $input, field);
acf.addFilter('acfe/fields/date_range_picker/is_invalid/name=my_date_range', function(isInvalid, date, $input, field){

    // makes all wednesdays invalid
    if(date.isoWeekday() === 3){
        isInvalid = true;
    return isInvalid;


PHP Days Difference

Here is an example of how to calculate difference between the start and end dates with PHP:

// get "my_date_range" value from post id "1484" (unformatted)
$date_range = get_field('my_date_range', 1484, false);

// convert to PHP DateTime
$start = DateTime::createFromFormat('Ymd', $date_range['start']);
$end = DateTime::createFromFormat('Ymd', $date_range['end']);

// get days difference
$days = $end->diff($start)->format('%a');