Timepicker

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

---

edit on github

Examples

<template>
  <section>
    <o-field grouped group-multiline>
      <div class="control">
        <o-switch v-model="enableSeconds">Enable seconds</o-switch>
      </div>
      <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 rounded placeholder="Click to select..." icon="clock" :enable-seconds="enableSeconds" :hour-format="hourFormat" :locale="locale"> </o-timepicker>
    </o-field>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        hourFormat: undefined, // Browser locale
        enableSeconds: false,
        locale: undefined // Browser locale
      }
    }
  }
</script>

Min/Max date

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

<script>
  export default {
    data() {
      const min = new Date()
      min.setHours(9)
      min.setMinutes(0)
      const max = new Date()
      max.setHours(18)
      max.setMinutes(0)
      return {
        minTime: min,
        maxTime: max
      }
    }
  }
</script>

Footer

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

<script>
  export default {
    data() {
      return {
        time: new Date()
      }
    }
  }
</script>

Granularity

<template>
  <o-field label="Select timepicker">
    <o-timepicker placeholder="Click to select" icon="clock" :incrementMinutes="minutesGranularity" :incrementHours="hoursGranularity"> </o-timepicker>
  </o-field>
</template>
<script>
  export default {
    data() {
      return {
        minutesGranularity: 15,
        hoursGranularity: 2
      }
    }
  }
</script>

Inline

<template>
  <o-timepicker v-model="time" inline></o-timepicker>
</template>

<script>
  export default {
    data() {
      return {
        time: new Date()
      }
    }
  }
</script>

Class props

📄 Full scss file

Select time

1 2 3 4 5 6 7 8 9 10 11 12

:

00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

AM PM

This is the footer

How does 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.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

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. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
boxClass	Class of the Timepicker component box where you choose the date.
footerClass	Class of the Timepicker footer.
mobileClass	Class of the Table when on mobile. 👉 Switch to mobile view to see it in action!
rootClass	Class of the root element.
selectClass	Class of the Timepicker select.
selectPlaceholderClass	Class of the Timepicker select placeholder.
separatorClass	Class of the Timepicker separator.
sizeClass	Class of the Timepicker component size.	size	small medium large

Props

Prop name	Description	Type	Values	Default
appendToBody		boolean	-
autocomplete	Native options to use in HTML5 validation	string	-
defaultMinutes		number	-
defaultSeconds		number	-
disabled		boolean	-
dropdownClasses	Classes to apply on internal dropdown (@see o-dropdown style docs)	object	-
editable		boolean	-
enableSeconds		boolean	-
expanded	Makes input full width when inside a grouped or addon field	boolean	-
focusable		boolean	-	true
hourFormat		string	-
icon	Icon name to be added	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack
incrementHours		number	-	1
incrementMinutes		number	-	1
incrementSeconds		number	-	1
inline		boolean	-
inputClasses	Classes to apply on internal input (@see o-input style docs)	object	-
maxTime		date	-
maxlength	Same as native maxlength, plus character counter	number|string	-
minTime		date	-
mobileBreakpoint	Mobile breakpoint as max-width value	string	-
mobileNative		boolean	-	From config timepicker {   mobileNative: true }
openOnFocus		boolean	-
override	Override classes	boolean	-	false
placeholder		string	-
position		string	-
resetOnMeridianChange		boolean	-	false
rounded	Makes the element rounded	boolean	-
size	Size of button, optional	string	small, medium, large
statusIcon	Show status icon using field and variant prop	boolean	-	From config {    "statusIcon": true }
timeCreator		func	-	Default function (see source code)
timeFormatter		func	-	Default function (see source code)
timeParser		func	-	Default function (see source code)
unselectableTimes		array	-
useHtml5Validation	Enable html 5 native validation	boolean	-	From config {    "useHtml5Validation": true }
validationMessage	The message which is shown when a validation error occurs	string	-
value		date	-

Events

Event name	Properties	Description
blur
focus
input

Slots

Name	Description	Bindings
trigger
default

Style

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