Date Range PickerPRO

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 Settings

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 = $input.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.

/**
 * 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');