# 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
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 -
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
change-month
change-year
blur
focus
input

# Slots

Name Description Bindings
default