Timepicker

The Timepicker input component allow users to select a time, and type the date directly into the input. The input opens a simple popover/modal for selecting a time, and uses the native timepicker for mobile.

The overlay is implemented using the native Popover API.

Use it with the Field component to access all the functionalities.

Examples

Base

Show code

HTML

<section>
    <o-field grouped>
        <o-field>
            <o-switch v-model="enableSeconds" label="Enable seconds" />
        </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 time">
        <o-timepicker
            v-model="selected"
            placeholder="Click to select..."
            icon="clock"
            :enable-seconds="enableSeconds"
            :hour-format="hourFormat"
            :locale="locale" />
    </o-field>
    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const selected = ref(new Date());
const hourFormat = ref(); // Browser locale
const enableSeconds = ref(false);
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-timepicker inline />
</section>

Min/Max date

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

Show code

HTML

<section>
    <o-field label="Select time">
        <o-timepicker
            placeholder="Click to select..."
            rounded
            :min-time="minTime"
            :max-time="maxTime" />
    </o-field>
</section>

JS

import { ref } from "vue";

const min = new Date();
min.setHours(9);
min.setMinutes(0);
const max = new Date();
max.setHours(18);
max.setMinutes(0);

const minTime = ref(min);
const maxTime = ref(max);

Templates

The component has an additional footer template slot for customization.

Show code

HTML

<section>
    <o-field label="Select time">
        <o-timepicker v-model="time" placeholder="Click to select...">
            <template #footer>
                <o-button
                    label="Now"
                    variant="primary"
                    icon-left="clock"
                    @click="time = new Date()" />

                <o-button
                    label="Clear"
                    variant="danger"
                    icon-left="times"
                    outlined
                    @click="time = undefined" />
            </template>
        </o-timepicker>
    </o-field>
</section>

JS

import { ref } from "vue";

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

SCSS

button {
    margin-left: 0.5rem;
}

Granularity

To define the granularity of the hours, minutes and seconds to select from use the increment-hours, increment-minutes and increment-seconds props.

Show code

HTML

<section>
    <o-field label="Select timepicker">
        <o-timepicker
            placeholder="Click to select"
            icon="clock"
            enable-seconds
            :increment-minutes="5"
            :increment-hours="2"
            :increment-seconds="15" />
    </o-field>
</section>

Timepicker Component

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

<o-timepicker></o-timepicker>

Props

Prop name	Description	Type	Values	Default
active	The active state of the dropdown	boolean	-	false
ariaSelectHoursLabel	Accessibility hours select aria label	string	-	From config: timepicker: {   ariaSelectHourLabel: "Select Hour" }
ariaSelectMinutesLabel	Accessibility minutes select aria label	string	-	From config: timepicker: {   ariaSelectMinuteLabel: "Select Minute" }
ariaSelectSecondsLabel	Accessibility seconds select aria label	string	-	From config: timepicker: {   ariaSelectSecondLabel: "Select Second" }
creator	time creator function, default is new Date()	(() => Date)	-	From config: timepicker: {   creator: undefined }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: Date | null , state: ValidityState) => string) | undefined	-	""
defaultMinutes		number	-
defaultSeconds		number	-
desktopModal	Picker content is shown into a modal on desktop	boolean	-	From config: timepicker: {   desktopModal: false }
disabled	Same as native disabled	boolean	-	false
enableSeconds		boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	From config: timepicker: {   expanded: false }
formatter	Custom function to format a date into a string	((date: Date ) => string) | undefined	-	From config: timepicker: {   formatter: undefined }
hourFormat		"12" | "24" | 12 | 24	-
icon	Icon to be shown	string	-	From config: timepicker: {   icon: undefined }
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: timepicker: {   iconPack: undefined }
iconRight	Icon to be added on the right side	string	-	From config: timepicker: {   iconRight: undefined }
iconRightClickable	Make the icon right clickable	boolean	-	false
incrementHours		number	-	1
incrementMinutes		number	-	1
incrementSeconds		number	-	1
inline	Display datepicker inline	boolean	-	false
locale	Date format locale	string	-	From config: {   locale: undefined }
maxTime	Max time to select	Date	-
minTime	Min time to select	Date	-
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: timepicker: {   mobileBreakpoint: undefined }
mobileModal	Picker content is shown into a modal on mobile	boolean	-	From config: timepicker: {   mobileModal: true }
mobileNative	Enable mobile native input if mobile agent	boolean	-	From config: timepicker: {   mobileNative: true }
v-model	The input value state, use v-model to make it two-way binding	Date	-
openOnFocus	Open picker on focus	boolean	-	From config: timepicker: {   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: timepicker: {   parser: undefined }
placeholder	Input placeholder	string	-
position	Position of the popover relative to the input	"bottom" | "center" | "left" | "right" | "top"	auto, top, bottom, left, right, center	From config: timepicker: {   position: "bottom" }
readonly	Same as native input readonly	boolean	-	false
resetOnMeridianChange	Reset the time inputs when meridian changes	boolean	-	false
rounded	Makes the input rounded	boolean	-	false
size	Size of the button	string	small, medium, large	From config: timepicker: {   size: undefined }
stayOpen	The picker stays open after date got picked	boolean	-
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: timepicker: {   teleport: false }
unselectableTimes	Define a list of times which can not be selected	Date[] | ((date: Date) => boolean)	-
useHtml5Validation	Enable HTML 5 native validation	boolean	-	From config: {   useHtml5Validation: true }

Events

Event name	Properties	Description
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
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

Slots

Name	Description	Bindings
trigger	Override the trigger input element
header	Define an additional content before the body
body	Override the content body
footer	Define an additional content after the body

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class 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
rootClass	Class of the root element.
mobileClass	Class of the root element when on mobile. 👉 Switch to mobile view to see it in action!
teleportClass	Class of the root element when teleported.	teleport
disabledClass	Class of the root element when disabled.	disabled
sizeClass	Class of the root element with size.	size	small medium large
expandedClass	Class of the root element when expanded.	expanded
inlineClass	Class of the root element when inlined.	inline
activeClass	Class of the root element when active.	active
triggerClass	Class of the trigger element.
contentClass	Class of the box container element where you choose the date.
contentModalClass	Class of the content element when shown as modal.	mobileModal desktopModal
contentBackdropClass	Class of the content when should has a backdrop.	mobileModal desktopModal
contentActiveClass	Class of the content element when active.	active
headerClass	Class of the content header element.
bodyClass	Class of the content body element.
separatorClass	Class of the select separator element.
footerClass	Class of the content footer element.
inputClass	Class to apply on the input element. More details here.
inputAttrs	Input properties to apply on the internal input component. More details here.
selectClass	Class to apply on the select element. More details here.
selectAttrs	Select properties to apply on the internal select component. More details here.

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$timepicker-font-size	h.useVar("font-size")
$timepicker-color	h.useVar("font-color")
$timepicker-line-height	h.useVar("line-height")
$timepicker-font-weight	600
$timepicker-box-padding	0 calc(2 * h.useVar("control-spacer"))
$timepicker-footer-padding	0 0.5rem
$timepicker-select-padding	h.useVar("control-padding-vertical") h.useVar("control-padding-horizontal")
$timepicker-select-placeholder-opacity	h.useVar("disabled-opacity")

See ➜ 📄 SCSS file

Current theme ➜ Bulma

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

Current theme ➜ Bootstrap

SASS Variable	Default
$timepicker-select-width	4em

See ➜ 📄 SCSS file