Skip to content

Datetimepicker

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

Examples

Base

Show code

Inline

Show code
Show code

Min/Max Datetime

Show code

Class props

'Classes applied to the element'

Datetimepicker component

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

html
<o-datetimepicker></o-datetimepicker>

Props

Prop nameDescriptionTypeValuesDefault
activeThe active state of the dropdown, use v-model:active to make it two-way bindingboolean-false
datepickerDefine props for the underlying datepicker componentany-
datetimeCreatorDate creator function, default is new Date()(date: Date) => Date-
From config:
datetimepicker: {
  datetimeCreator: (d: Date) => new Date(d)
}
datetimeFormatterCustom function to format a date into a string(date: Date) => string-
From config:
datetimepicker: {
  dateFormatter: defaultFunction
}
datetimeParserCustom function to parse a string into a date(date: string) => Date-
From config:
datetimepicker: {
  dateParser: defaultFunction
}
disabledSame as native disabledboolean-false
expandedboolean-false
iconIcon to be shownstring-
From config:
datetimepicker: {
  icon: undefined
}
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
datetimepicker: {
  iconPack: undefined
}
iconRightIcon to be added on the right sidestring-
From config:
datetimepicker: {
  iconRight: undefined
}
iconRightClickableMake the icon right clickableboolean-false
inlineDisplay datetimepicker inlineboolean-false
localeDate format localestring-
From config:
{
  locale: undefined
}
maxDatetimeMax date to selectDate-
minDatetimeMin date to selectDate-
mobileNativeEnable mobile native input if mobile agentboolean-
From config:
datetimepicker: {
  mobileNative: true
}
v-modelThe input value stateDate-null
openOnFocusOpen dropdown on focusboolean-
From config:
datetimepicker: {
  openOnFocus: true
}
overrideOverride existing theme classes completelyboolean-
placeholderInput placeholderstring-
positionDropdown positionstring-
readonlySame as native input readonlyboolean-false
roundedMakes the input roundedboolean-false
sizeSize of the input controlstringsmall, medium, large
From config:
datetimepicker: {
  size: undefined
}
teleportAppend the component to another part of the DOM.
Set true to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used.
string | boolean | Record<string, any>-
From config:
datetimepicker: {
  teleport: false
}
timepickerDefine props for the underlying timepicker componentany-
useHtml5ValidationEnable html 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
validationMessageThe message which is shown when a validation error occursstring-

Events

Event namePropertiesDescription
change-monthvalue number - month numberon month change event
change-yearvalue number - year numberon year change event
icon-clickevent Event - native eventon icon click event
icon-right-clickevent Event - native eventon icon right click event
update:modelValuevalue Date | Date[] - updated modelValue propmodelValue prop two-way binding
update:activevalue boolean - updated active propactive prop two-way binding
range-startvalue Date - range start dateon range start is selected event
range-endvalue Date - range end dateon range end is selected event
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event

Slots

NameDescriptionBindings
footerDefine an additional footer

Sass variables

Current theme ➜ Oruga

SASS VariableDefault

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.

Released under the MIT License.