Date Picker

The Date Picker controller allows users to select a date or range of dates using a visual picker user interface.

Demonstration

 
Handy::control( 'date-picker', [
    'id'          => 'date_picker_id',
    'section'     => 'layout_section',
    'label'       => esc_html__( 'Date Picker Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'priority'    => 1
]);

TIP

Here's an example using the default and enable_time parameters. Note the enable_time value accepts only a boolean data type, while the default value accepts an array data type that contains a valid date using these formats Y-m-d or Y-m-d H:i if enable_time is set to true.

 
// If 'enable_time' is set to 'false', then the 'default' 
// value must not contain time.
Handy::control( 'date-picker', [
    'id'          => 'date_picker_id',
    'section'     => 'layout_section',
    'default'     => [ '2020-12-25' ],
    'label'       => esc_html__( 'Date Picker Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'priority'    => 1,
    'enable_time' => false
]);

// If 'enable_time' is set to 'true', then the 'default' 
// can contain time.
Handy::control( 'date-picker', [
    'id'          => 'date_picker_id',
    'section'     => 'layout_section',
    'default'     => [ '2020-12-25 12:00' ],
    'label'       => esc_html__( 'Date Picker Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'priority'    => 1,
    'enable_time' => true
]);

TIP

Here's an example using the mode parameter. Note the mode value accepts only single or range. And also take a note that the default value depends on mode's value. For example, if mode is set to single, then the default value must contain only one element, while if mode is set to range, then the default value must contain two elements: the starting and ending dates.

 
// If 'mode' is set to 'single', then the 'default' value
// must contain a one date only.
Handy::control( 'date-picker', [
    'id'          => 'date_picker_id',
    'section'     => 'layout_section',
    'default'     => [ '2020-12-25' ],
    'label'       => esc_html__( 'Date Picker Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'priority'    => 1,
    'enable_time' => false,
    'mode'        => 'single'
]);

// If 'mode' is set to 'range', then the 'default' value
// must contain a two dates: the starting and ending dates.
Handy::control( 'date-picker', [
    'id'          => 'date_picker_id',
    'section'     => 'layout_section',
    'default'     => [ '2020-12-25', '2020-12-30' ],
    'label'       => esc_html__( 'Date Picker Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'priority'    => 1,
    'enable_time' => false,
    'mode'        => 'range'
]);

Basic Usage

 
// Return an array.
$values = get_theme_mod( 'date_picker_id' );

Parameters

Name	Description
id	`string` `required` The unique slug like string used as an ID and also as an index name in storing data in a database.
section	`string` `required` The ID of the section in which the control will be displayed.
default	`array` `optional` The predetermined value of the control. Accepts an `array` of valid date, for thorough explaination kindy refer to the demonstration above. Default empty `array`.
enable_time	`boolean` `optional` The flag that indicates whether to enable time. Default `false`.
mode	`string` `optional` The date picker's mode determines whether to select only a single date or a range of dates. Accepts only `single` and `range`. Default `single`.
label	`string` `optional` The label or title of the control to show in the UI. Default empty.
description	`string` `optional` The description of the control to show in the UI. Default empty.
placeholder	`string` `optional` The placeholder of the control to show in the UI. Default empty.
priority	`integer` `optional` The order of control appears in the section. Default `0`.
validations	`array` `optional` The set of validations used to validate the value of the control. For further details, read validations. Default empty.
active_callback	`callable` `optional` A callback function that determines the visibility of a control, whether to show or hide depending on a condition. For further details, read active_callback. Default empty.
sanitize_callback	`callable` `optional` A callback function that sanitizes the value of control before storing it in the database. Note that this is only optional since each control is already well sanitized. For further details, read sanitize_callback. Default empty.