# Datetimepicker

An input with a simple dropdown/modal for selecting a date and time, uses native datetimepicker for mobile

edit on github

# Examples

# Inline

# Class props

📄 Full scss file

How does Class props inspector work?
Class prop Description Props Suffixes
datepickerWrapperClass Class of the Datepicker wrapper.
timepickerWrapperClass Class of the Timepicker wrapper.

# Props

Prop name Description Type Values Default
appendToBody boolean -
autocomplete Native options to use in HTML5 validation string -
datepicker Properties and classes to bind to the internal DatePicker object -
datetimeCreator func - Default function (see source code)
datetimeFormatter func -
datetimeParser func -
disabled boolean -
editable boolean - false
expanded Makes input full width when inside a grouped or addon field boolean -
icon Icon name to be added string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconRight Icon name to be added on the right side string -
iconRightClickable Make the icon right clickable boolean -
inline boolean -
locale string|array -
From config

   locale: undefined
maxDatetime date -
maxlength Same as native maxlength, plus character counter number|string -
minDatetime date -
mobileNative boolean - true
openOnFocus boolean -
override Override classes boolean - false
placeholder string -
position Optional, position of the datepicker relative to the input string top-right, top-left, bottom-left
rounded Makes the element rounded boolean -
size Size of button, optional string small, medium, large
statusIcon Show status icon using field and variant prop boolean -
From config

   "statusIcon": true
timepicker Properties and classes to bind to the internal TimePicker object -
useHtml5Validation Enable html 5 native validation boolean -
From config

   "useHtml5Validation": true
validationMessage The message which is shown when a validation error occurs string -
value date -

# Events

Event name Properties Description

# Slots

Name Description Bindings