DatePicker

Properties

Property	Type	Description
defaultValue	string, string[]	Default value displayed when opened
showNow	boolean	Weather to show now, when showTime i set
showTime	table, boolean	Provider an additional time selection
showToday	boolean	Weather to show today button
rangePicker	boolean	When true user can pick range of date
allowClear	boolean	Weather to show clear button
autoFocus	boolean	Weather for element to be focused when opened
bordered	boolean	Weather the element has a border
changeOnBlur	boolean	See changeOnBlur
disabled	boolean	Weather the element is disabled
mode	time date month year decade	Mode of picker panel
open	boolean	Overwrite how to display the datepicker
picker	date week month quarter year	Type of pick
placeholder	string	The placeholder of date input
placement	bottomLeft bottomRight topLeft topRight	Placement of the popover
nextIcon	string	Icon of next button
prevIcon	string	Icon of previous button
size	large middle small	Size of datepicker
status	error warning	Validation status
suffixIcon	string	Suffix icon, displayed after input
superNextIcon	string	Icon of super next icon
superPrevIcon	string	IUcon of super previous icon
popupStyle	table, CSSProperties	CSS Properties of the popup
format	string	Foramt of the date
onChange	function(date, dateString)	Fired when selected date is changed
onOk	function(date)	Fired when next/ok button is pressed
onPanelChange	function(value, mode)	Fired when user want to select month, year, etc
value	undefined	Value
disabledTime	undefined	Unimplemented
allowEmpty	boolean	Allows the user to leave input empty
separator	undefined	Unimplemented
onCalendarChange	function(dates, dateStrings, info)	Fired when either starttime or endtime is picked
All properties are optional.
List of icons.
Ant Design Documentation.

Children

DatePicker does not support children.

Example

"Trigger change when blur. e.g. datetime picker no need click confirm button".

defaultValue

The default value of the DatePicker.

-- Default Format: DD-MM-YYYY
defaultValue = "DD-MM-YYY", -- Input has to match format.

When its a RangePicker:

defaultValue = {"DD-MM-YYYY", "DD-MM-YYYY"} -- {left side, right side}
rangePicker = true,

showNow

When showTime = true, a "Now" button will appear when this is also true.

showTime

Weather the user also has to pick time:

NOTE: Remember to set foramt to include time!: foramt = "DD-MM-YYYY HH:mm:ss"

showToday

Weather to display the "today" button:

rangePicker

When true the user can pick a start and a end date:

allowClear

Weather to display the clear button to clear users input.

autoFocus

When true the DatePicker element will be focused when shown to the user.

bordered

Weather the DatePicker has a border, here hows it looks without a border:

changeOnBlur

"Trigger change when blur. e.g. datetime picker no need click confirm button"

disabled

Weather the DatePicker is disabled:

mode

Changes what the user has to pick, "date" is default.

open

Weather the popof the the DatePicker is displayed.

When set you'll have to handle how it opens and closes yourself.

picker

What the "final output" user has to choose.

Date: User has to pick full date DD-MM-YYYY

Week:

Month:

Quarter:

Year:

placeholder

Placeholder text if no input is selected.

placement

Can be any of the following: bottomLeft bottomRight topLeft topRight.

Changes the placement of the popover.

nextIcon

Changes the icon of the next button.

nextIcon = "StepForwardOutlined",

prevIcon

Changes the icon of the previous button.

You can see an image from nextIcon.

size

Changes the size of the input.

Does not change anything in the popover.

status

Changes the outline color of the DatePickers input.

Error:

Warning:

suffixIcon

Changes the icon displayed to the right side of the input.

suffixIcon = StepForwardOutlined

superNextIcon / superPrevIcon

Changes the icon of the "super" next/previous icon.

popupStyle

CSS Styling for the container of the popup.

It's displayed behind the actual popover, but you can try and play around with it if you want.

format

format = "DD-MM-YYYY" Is the default format.

Meaning the input is DAY-MONTH-YEAR.

format = "MM-DD-YYYY" Means MONTH-DAY-YEAR.

format = "DD-MM-YYYY HH:mm:ss" is DAY-MOTH-YEAR HOUR:minute:second.

Your defaultValue has to match this!.

Also the output from the events is always "DD-MM-YYYY" as of now...

onChange

Fired when user changes input of the DatePicker.

onChange = function(_, _, date, dateString)
    print("onChange: ", json.encode(date, {indent = true}), json.encode(dateString))
end

Example of output:

When rangePicker = true:

onChange = function(_, _, date, dateString)
    print("onChange: ", json.encode(date, {indent = true}), json.encode(dateString))
    local first = date[0] -- Earliest date
    local second = date[1] -- Latest date
    local first2 = dateString[0]
    local second2 = dateString[1]
end

onOk

Fired when user clicks the "ok" button.

onOk = function(_, _, date)
    print("onOk: Clicked Ok: ", json.encode(date))
    local date = date.dateString
    local time = date.timeString
end

For rangePicker:

onOk = function(_, _, date)
    print("onOk: Clicked Ok: ", json.encode(date, {indent = true}))
    local first = date[0] -- Earliest date
    local second = date[1] -- Latest date
    local first2 = dateString[0]
    local second2 = dateString[1]
end

onPanelChange

Fired when user goes in to change the year, month or decade.

onPanelChange = function(_, _, value, mode)
    print("onPanelChange: ", json.encode(value), mode)
    print("Panel Change To: ", mode)
end

mode is a array when rangePicker = true

allowEmpty

Weather user is allowed to not pick a date.

onCalendarChange

Requires rangePicker = true.

Fired when user changes either side of the picker, so either early date or late date...

disabledTime

Yet to be implemented correctly.