Timepicker

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

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

css

Inline

Show code

HTML

<section>
    <o-timepicker inline />
</section>

js

css

Min/Max date

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

css

Slot

Show code

HTML

<section>
    <o-field label="Select time">
        <o-timepicker v-model="time" placeholder="Click to select...">
            <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 = null" />
        </o-timepicker>
    </o-field>
</section>

JS

import { ref } from "vue";

const time = ref(new Date());

SCSS

button {
    margin-left: 0.5rem;
}

Granularity

Show code

HTML

<section>
    <o-field label="Select timepicker">
        <o-timepicker
            placeholder="Click to select"
            icon="clock"
            :increment-minutes="minutesGranularity"
            :increment-hours="hoursGranularity" />
    </o-field>
</section>

JS

import { ref } from "vue";

const minutesGranularity = ref(5);
const hoursGranularity = ref(2);

css

Class props

'Classes applied to the element'

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
closeOnClick	Close dropdown on click	boolean	-	From config: timepicker: {   closeOnClick: true }
defaultMinutes		number	-
defaultSeconds		number	-
disabled	Same as native disabled	boolean	-	false
enableSeconds		boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	false
hourFormat		string	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	Enable dropdown mobile modal	boolean	-	From config: timepicker: {   mobileModal: true }
mobileNative	Enable mobile native input if mobile agent	boolean	-	From config: timepicker: {   mobileNative: true }
openOnFocus	Open dropdown on focus	boolean	-	From config: timepicker: {   openOnFocus: true }
override	Override existing theme classes completely	boolean	-
placeholder	Input placeholder	string	-
position	Dropdown position	string	-
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 }
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|string|object	-	From config: timepicker: {   teleport: false }
timeCreator	time creator function, default is new Date()	() => Date	-	From config: timepicker: {   timeCreator: () => new Date() }
timeFormatter	Custom function to format a date into a string	(date: Date) => string	-	From config: timepicker: {   timeFormatter: defaultFunction }
timeParser	Custom function to parse a string into a date	(date: string) => Date	-	From config: timepicker: {   timeParser: defaultFunction }
trapFocus	Dropdown trapFocus	boolean	-	From config: timepicker: {   trapFocus: true }
unselectableTimes	Define a list of times which can not be selected	Date[] | ((date: Date) => boolean)	-	Default function (see source code)
useHtml5Validation	Enable html 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
v-model		Date	-
validationMessage	The message which is shown when a validation error occurs	string	-

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:modelValue	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
default	Define an additional content on footer

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$timepicker-font-size	$base-font-size
$timepicker-box-line-height	$base-line-height
$timepicker-box-padding	0.375rem 1rem
$timepicker-footer-padding	0 0.5rem
$timepicker-footer-margin	0.875rem 0 0 0
$timepicker-select-line-height	$base-line-height
$timepicker-select-padding	$control-padding-vertical $control-padding-horizontal
$timepicker-select-color	#363636
$timepicker-select-font-weight	600
$timepicker-select-placeholder-opacity	$base-disabled-opacity
$timepicker-separator-font-weight	600

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$timepicker-font-size	$base-font-size
$timepicker-box-line-height	$base-line-height
$timepicker-box-padding	0.375rem 1rem
$timepicker-footer-padding	0 0.5rem
$timepicker-footer-margin	0.875rem 0 0 0
$timepicker-select-line-height	$base-line-height
$timepicker-select-padding	$control-padding-vertical $control-padding-horizontal
$timepicker-select-color	#363636
$timepicker-select-font-weight	600
$timepicker-select-placeholder-opacity	$base-disabled-opacity
$timepicker-separator-font-weight	600

See ➜ 📄 Full scss file

Current theme ➜ Bulma

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

Current theme ➜ Bootstrap

SASS Variable	Default

See ➜ 📄 Full scss file