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 te 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
No Weekends
Disable weekends
Auto Close on Seletion
Automatically close the modal when a date is selected
Allow Null
Allow user to clear a date

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.

/*
 * Date Range Picker: Args
 * 
 * @object  args   Daterangepicker library 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.

/*
 * 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 = $inputText.data('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.

/*
 * Date Range Picker: Is Invalid Date
 * 
 * @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;

});

Field 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. Sub fields meta {field_name}_start & {field_name}_end will be automatically 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 will be automatically compiled when using the get_field() function on the main field name. Sub fields will also return their respective values. Usage example:

$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

Calculate the dates difference

Here is an example of how to calculate difference between the start and end dates of a Date Range field:

// Set the post id where the date range is
$post_id = 1484;

// Set the date range field name
$field_name = 'my_date_range';

// Get the date range field value
$date_range = get_field($field_name, $post_id, false);

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

// Get difference
$diff = date_diff($start, $end);

// Number of days of difference
$days_diff = $diff->format('%a');

// Print: "17"