Skip to main content

Date

Date picker with single, range and multiple modes available.

Value

mode => 'single'

Returns string

$date = fx_get_meta('id'); // YYYYMMDD e.g. 19920511 -> 11 May 1992

mode => 'range'

Returns string

$date = fx_get_meta('id'); // YYYYMMDD - YYYYMMDD
$dates = explode(' - ', $date);
$min_date = $dates[0];
$max_date = $dates[1];

mode => 'multiple'

Returns string

$date = fx_get_meta('id'); // YYYYMMDD - YYYYMMDD - YYYYMMDD... etc
$dates = explode(' - ', $date);

Example

'id' => [
'type' => 'date',
'align' => 'right',
'minDate' => '11/05/1992',
'maxDate' => '30/12/2020',
'displayFormat' => 'dddd Do MMM YYYY',
'mode' => 'single',
'placeholder' => 'Please select a date',
'title' => 'Your date',
'className' => 'my-class-name',
];

Props

align

Dropdown horizontal alignment

type: enum('left'|'right'|'center')

defaultValue: 'right'

className

Metabox class name

type: bool

displayFormat

Date display format (form date-fns)

type: string

defaultValue: 'dddd Do MMM YYYY'

maxDate

Latest date to show (DD/MM/YYYY)

type: string

minDate

Earliest date to show (DD/MM/YYYY)

type: string

minWidth

Minimum width of the dropdown

type: string

defaultValue: '200px'

mode

Datepicker input mode

type: enum('single'|'range'|'multiple')

defaultValue: 'single'

placeholder

Placeholder text for the input

type: string

title

Metabox title

type: string