Datetimepicker

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

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

Show code

HTML

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

Footer slot

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

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>();

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

<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	-
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	-
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

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.