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.
dropdownClasses	Classes to apply on dropdown. More detail here
footerClass	Class of the Timepicker footer.
inputClasses	Classes to apply on internal input. More detail here
mobileClass	Class of the Table when on mobile. 👉 Switch to mobile view to see it in action!
rootClass	Class of the root element.
selectClasses	Classes to apply on select. More detail here
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	-
editable		boolean	-
enableSeconds		boolean	-
expanded	Makes input full width when inside a grouped or addon field	boolean	-
hourFormat	Hour format for input and display	string	12, 24
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	-
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	Optional, position of the datepicker relative to the input	string	top-right, top-left, bottom-left
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
invalid
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