Datetimepicker

The Datetimepicker input component allow users to select a date and time based on their browser’s locale from a customizable calendar, and type the date directly into the input with full internationalization support. The input opens a simple dropdown/modal for selecting a date, and uses the native datetimepicker for mobile. The component is based on the Datepicker component.

Examples

Base

Show code

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"
            placeholder="Click to select..."
            icon="calendar"
            :locale="locale"
            :datepicker="{ showWeekNumber }"
            :timepicker="{ enableSeconds, hourFormat }" />
    </o-field>

    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

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

Inline

To render the component inline instead of a dropdown/modal use the inline prop.

Show code

HTML

<section>
    <o-datetimepicker inline />
</section>

Footer slot

The component has an additional footer slot for customization.

Show code

HTML

<section>
    <o-field label="Select datetime">
        <o-datetimepicker
            v-model="datetime"
            rounded
            placeholder="Click to select...">
            <template #footer>
                <div class="footer-container">
                    <o-button
                        variant="primary"
                        @click="datetime = new Date()">
                        <o-icon icon="calendar" />
                        <span>Today</span>
                    </o-button>
                    <o-button
                        variant="danger"
                        @click="datetime = undefined">
                        <o-icon icon="times" />
                        <span>Clear</span>
                    </o-button>
                </div>
            </template>
        </o-datetimepicker>
    </o-field>
</section>

JS

import { ref } from "vue";

const datetime = ref<Date | undefined>(new Date());

SCSS

.footer-container {
    display: flex;
    justify-content: end;
    margin-top: 0.5rem;
}
.footer-container button {
    margin-left: 0.5rem;
}

Min/Max Datetime

Use the min-datetime and max-datetime props to define a limited date range for the user to choose from.

Show code

HTML

<section>
    <o-field grouped>
        <o-field label="Min Datetime">
            <o-datetimepicker
                v-model="minDatetime"
                placeholder="Click to select..."
                icon="calendar"
                editable />
        </o-field>
        <o-field label="Max Datetime">
            <o-datetimepicker
                v-model="maxDatetime"
                placeholder="Click to select..."
                icon="calendar"
                editable />
        </o-field>
    </o-field>

    <o-field label="Select datetime">
        <o-datetimepicker
            rounded
            placeholder="Click to select..."
            icon="calendar"
            :min-datetime="minDatetime"
            :max-datetime="maxDatetime" />
    </o-field>
</section>

JS

import { ref } from "vue";

const minDatetime = ref<Date>();
const maxDatetime = ref<Date>();

Datetimepicker component

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

<o-datetimepicker></o-datetimepicker>

Props

Prop name	Description	Type	Values	Default
active	The active state of the dropdown, use v-model:active to make it two-way binding	boolean	-	false
creator	Date creator function, default is new Date()	(() => Date)	-	From config: datetimepicker: {   datetimeCreator: undefined }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: Date | null , state: ValidityState) => string) | undefined	-	""
datepicker	Define props for the underlying datepicker component	DatepickerProps	-
desktopModal	Dropdown content is shown into a modal on desktop	boolean	-	From config: datetimepicker: {   desktopModal: false }
disabled	Same as native disabled	boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	false
formatter	Custom function to format a date into a string	((date: Date ) => string) | undefined	-	From config: datetimepicker: {   dateFormatter: undefined }
icon	Icon to be shown	string	-	From config: datetimepicker: {   icon: undefined }
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: datetimepicker: {   iconPack: undefined }
iconRight	Icon to be added on the right side	string	-	From config: datetimepicker: {   iconRight: undefined }
iconRightClickable	Make the icon right clickable	boolean	-	false
inline	Display datetimepicker inline	boolean	-	false
locale	Date format locale	string	-	From config: {   locale: undefined }
maxDatetime	Max date to select	Date	-
minDatetime	Min date to select	Date	-
mobileModal	Dropdown content is shown into a modal on mobile	boolean	-	From config: datetimepicker: {   mobileModal: true }
mobileNative	Enable mobile native input if mobile agent	boolean	-	From config: datetimepicker: {   mobileNative: true }
v-model	The input value state	Date	-
openOnFocus	Open dropdown on focus	boolean	-	From config: datetimepicker: {   openOnFocus: true }
override	Override existing theme classes completely	boolean	-
parser	Custom function to parse a string into a date	((date: string) => Date ) | undefined	-	From config: datetimepicker: {   dateParser: undefined }
placeholder	Input placeholder	string	-
position	Position of the dropdown relative to the input	"auto" | "bottom-left" | "bottom-right" | "bottom" | "left" | "right" | "top-left" | "top-right" | "top"	auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right
readonly	Same as native input readonly	boolean	-	false
rounded	Makes the input rounded	boolean	-	false
size	Size of the input control	string	small, medium, large	From config: datetimepicker: {   size: undefined }
teleport	Append 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.	boolean | object | string	-	From config: datetimepicker: {   teleport: false }
timepicker	Define props for the underlying timepicker component	TimepickerProps	-
useHtml5Validation	Enable HTML 5 native validation	boolean	-	From config: {   useHtml5Validation: true }

Events

Event name	Properties	Description
change-month	value number - month number	on month change event
change-year	value number - year number	on year change event
icon-click	event Event - native event	on icon click event
icon-right-click	event Event - native event	on icon right click event
update:model-value	value Date - updated modelValue prop	modelValue prop two-way binding
update:active	value boolean - updated active prop	active prop two-way binding
range-start	value Date - range start date	on range start is selected event
range-end	value Date - range end date	on range end is selected event
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event

Slots

Name	Description	Bindings
footer	Define an additional footer

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

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

Sass variables

Current theme ➜ Oruga

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.