Datetimepicker

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

Examples

Base

Show week number

Enable seconds

Locale

Hour format

Select datetime

Selected: Thu Sep 21 2023 13:06:38 GMT+0000 (Coordinated Universal Time)

Show code

HTMLJS

html

<section>
    <o-field grouped>
        <o-field>
            <o-switch v-model="showWeekNumber">Show week number</o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="enableSeconds">Enable seconds</o-switch>
        </o-field>
        <o-field label="Locale">
            <o-select v-model="locale">
                <option :value="undefined"></option>
                <option value="de-DE">de-DE</option>
                <option value="en-CA">en-CA</option>
                <option value="en-GB">en-GB</option>
                <option value="en-US">en-US</option>
                <option value="es-ES">es-ES</option>
                <option value="es-MX">es-MX</option>
                <option value="fr-CA">fr-CA</option>
                <option value="fr-FR">fr-FR</option>
                <option value="it-IT">it-IT</option>
                <option value="ja-JP">ja-JP</option>
                <option value="pt-BR">pt-BR</option>
                <option value="ru-RU">ru-RU</option>
                <option value="zn-CN">zn-CN</option>
            </o-select>
        </o-field>
        <o-field label="Hour format">
            <o-select v-model="hourFormat">
                <option :value="undefined"></option>
                <option value="12">12</option>
                <option value="24">24</option>
            </o-select>
        </o-field>
    </o-field>

    <o-field label="Select datetime">
        <o-datetimepicker
            v-model="selected"
            rounded
            placeholder="Click to select..."
            icon="calendar"
            :locale="locale"
            :datepicker="{ showWeekNumber }"
            :timepicker="{ enableSeconds, hourFormat }" />
    </o-field>
    <p><b>Selected:</b> {{ selected }}</p>
</section>

html

import { ref } from "vue";

const selected = ref(new Date());
const showWeekNumber = ref(false);
const enableSeconds = ref(false);
const hourFormat = ref(); // Browser locale
const locale = ref(); // Browser locale

scss

css

Inline

1 2

3 4 5 6 7 8 9

10 11 12 13 14 15 16

17 18 19 20 21 22 23

24 25 26 27 28 29 30

Show code

Select datetime

Show code

Min/Max Datetime

Min Datetime

Max Datetime

Select datetime

Show code

Class props

Select datetime

How does the Class props inspector work?

Class prop	Description	Props	Suffixes
datepickerWrapperClass	Class of the Datepicker wrapper.
timepickerWrapperClass	Class of the Timepicker wrapper.

Datetimepicker component

html

<o-datetimepicker></o-datetimepicker>

Props

Prop name	Description	Type	Values	Default
appendToBody		boolean	-
autocomplete	Native options to use in HTML5 validation	string	-
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		string	-
iconRightClickable		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
modelValue		date	-
openOnFocus		boolean	-
override		boolean	-
placeholder		string	-
position		string	-
rounded	Makes the element rounded	boolean	-
size		string	-
statusIcon	Show status icon using field and variant prop	boolean	-	From config: `{ "statusIcon": true }`
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	-

Events

Event name	Properties	Description
active-change
icon-right-click
change-month
change-year
blur
focus
invalid
update:modelValue

Slots

Name	Description	Bindings
footer

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default

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.

Datetimepicker ​

Examples ​

Base

Inline

Footer slot

Min/Max Datetime

Class props ​

Class prop

Description

Props

Suffixes

Datetimepicker component ​

Props ​

Events ​

Slots ​

Sass variables ​

Datetimepicker

Examples

Class props

Datetimepicker component

Props

Events

Slots

Sass variables