Timepicker

Vue Bootstrap 5 Timepicker component

Use MDB custom Timepicker component to select time.

Note: Read the API tab to find all available options and advanced customization

Basic example

Add Timepicker element to your site with the MDBTimepicker component.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker label="Select a time" v-model="picker1"/>
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker1 = ref("");

                  return {
                    picker1
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker1 = ref("");
            </script>

Inline Timepicker with 12h

MDB Timepicker allows you to use a inline version timepicker. Default version is with 12h.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker inline label="Select a time" v-model="picker2"/>
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker2 = ref("");

                  return {
                    picker2
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker2 = ref("");
            </script>

Inline Timepicker with 24h

MDB Timepicker allows you to use an inline version timepicker. Add :hoursFormat="24" to make it use 24h format.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
              inline
              :hoursFormat="24"
              label="Select a time"
              v-model="picker3"/>
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker3 = ref("");

                  return {
                    picker3
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker3 = ref("");
            </script>

Custom Icon

You can set your custom icon to input. If you will add the icon, the main icon from the input will be replaced with yours. Use iconClass property with icon class of your choice.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker4"
                iconClass="fab fa-vuejs fa-2x"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker4 = ref("");

                  return {
                    picker4
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker4 = ref("");
            </script>

Without icon

MDBTimepicker allows to set input without icon. Use :icon="false" to remove the icon from your timepicker input. Use togglePicker method on your timepicker ref to open it from the external element.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <div class="row">
                <MDBTimepicker
                  label="Select a time"
                  v-model="picker5"
                  :icon="false"
                  ref="picker5Ref"
                />
                <MDBBtn
                  color="primary"
                  class="mt-2"
                  @click="picker5Ref?.togglePicker()"
                >
                  Toggle Timepicker
                </MDBBtn>
              </div>
            </template>

        
            
            <script>
              import { MDBTimepicker, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker,
                  MDBBtn
                },
                setup() {
                  const picker5 = ref("");
                  const picker5Ref = ref(null);

                  return {
                    picker5,
                    picker5Ref
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker5 = ref("");
              const picker5Ref = ref<InstanceType<typeof MDBTimepicker> | null>(null);
            </script>

Default time

MDB Timepicker allows to initialize a default time in the picker and input. Pass a proper date value to v-model property to add default time. This property accepts strings like:

12:34
12:34 PM
12:34 AM

and also new Date() format like:

new Date()
new Date().toLocaleTimeString([],{timeStyle: 'short'})

Note: Hovering over the timepicker input will show you the information about proper date pattern. If you are using string with PM/AM, you have to have hoursFormat property set to 12 (default value). Also if you are using string without PM/AM and you would like have 24h format hour you have to set hoursFormat property to 24. If you will only put a string without PM/AM and hoursFormat property to 24 you are gonna have a timepicker with 12h and format set to AM with default.

With string PM

With string AM

With string without AM/PM

With string 24h

With new Date with 12h

With new Date with 24h

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <div class="p-2">
                <MDBTimepicker
                  label="With string PM"
                  v-model="picker6"
                />
              </div>
              <div class="p-2">
                <MDBTimepicker
                  label="With string AM"
                  v-model="picker7"
                />
              </div>
              <div class="p-2">
                <MDBTimepicker
                  label="With string without AM/PM"
                  v-model="picker8"
                  :hoursFormat="24"
                />
              </div>
              <div class="p-2">
                <MDBTimepicker
                  label="With string 24h"
                  v-model="picker9"
                  :hoursFormat="24"
                />
              </div>
              <div class="p-2">
                <MDBTimepicker
                  label="With new Date with 12h"
                  v-model="picker10"
                />
              </div>
              <div class="p-2">
                <MDBTimepicker
                  label="With new Date with 24h"
                  v-model="picker11"
                  :hoursFormat="24"
                />
              </div>
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker6 = ref("02:12 PM");
                  const picker7 = ref("05:12 AM");
                  const picker8 = ref("05:12");
                  const picker9 = ref("23:44");
                  const picker10 = ref(new Date());
                  const picker11 = ref(
                    new Date().toLocaleTimeString([], { timeStyle: "short" })
                  );
                  return {
                    picker6,
                    picker7,
                    picker8,
                    picker9,
                    picker10,
                    picker11,
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker6 = ref("02:12 PM");
              const picker7 = ref("05:12 AM");
              const picker8 = ref("05:12");
              const picker9 = ref("23:44");
              const picker10 = ref(new Date());
              const picker11 = ref(
                new Date().toLocaleTimeString([], { timeStyle: "short" })
              );
            </script>

Handle input value

Handling input value on modal approve is automatically binded to v-model value of timepicker component.

Select a time

Input value:

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker12"
                :hoursFormat="24"
              />
              <div class="my-2">
                Input value: <span>{{ picker12 }}</span>
              </div>
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker12 = ref("");

                  return {
                    picker12
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker12 = ref("");
            </script>

Format 24h

Timepicker allows you to use time format with 24 hours. You can set it with the :hoursFormat="24" property.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker13"
                :hoursFormat="24"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker13 = ref("");

                  return {
                    picker13
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker13 = ref("");
            </script>

Just Input

You can set a timepicker to just an input with :icon="false" and selfOpen properties.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker14"
                :icon="false"
                selfOpen
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker14 = ref("");

                  return {
                    picker14
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker14 = ref("");
            </script>

Increment

You can use :increment=" 5 | 10 | 15 | 30 " property to increment minutes value. Default value for increment is 1.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker15"
                :increment="5"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker15 = ref("");

                  return {
                    picker15
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker15 = ref("");
            </script>

Max time

Add max property to set maximum time value.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker16"
                max="6:35"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker16 = ref("");

                  return {
                    picker16
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker16 = ref("");
            </script>

Max time with PM

Add max property to set maximum time value.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker17"
                max="6:35 PM"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker17 = ref("");

                  return {
                    picker17
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker17 = ref("");
            </script>

Max time with AM

Add max property to set maximum time value.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker18"
                max="6:35 AM"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker18 = ref("");

                  return {
                    picker18
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker18 = ref("");
            </script>

Min time

Add min property to set minimum time value.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker19"
                min="10:15"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker19 = ref("");

                  return {
                    picker19
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker19 = ref("");
            </script>

Min time with PM

Add min property to set minimum time value.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker20"
                min="6:35 PM"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker20 = ref("");

                  return {
                    picker20
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker20 = ref("");
            </script>

Min time with AM

Add min property to set minimum time value.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker21"
                min="6:35 AM"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker21 = ref("");

                  return {
                    picker21
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker21 = ref("");
            </script>

Max/Min hours

Add min and max properties to limit the time value

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker22"
                min="5"
                max="12"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker22 = ref("");

                  return {
                    picker22
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker22 = ref("");
            </script>

Maximum hour

Pass only hour value to max property to set only maximum hour to timepicker.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker23"
                max="16"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker23 = ref("");

                  return {
                    picker23
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker23 = ref("");
            </script>

Minimum hour

Pass only hour value to min property to set only minimum hour to timepicker.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker24"
                min="14"
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker24 = ref("");

                  return {
                    picker24
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker24 = ref("");
            </script>

Disable past

Use the disablePast option to disallow past time selection.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker25"
                disablePast
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker25 = ref("");
                  return {
                    picker25
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker25 = ref("");
            </script>

Disable future

Use the disableFuture option to disallow future time selection.

Select a time

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBTimepicker
                label="Select a time"
                v-model="picker26"
                disableFuture
              />
            </template>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              export default {
                components: {
                  MDBTimepicker
                },
                setup() {
                  const picker26 = ref("");
                  return {
                    picker26
                  };
                }
              };
            </script>

        
            
            <script>
              import { MDBTimepicker } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const picker26 = ref("");
            </script>

Accessibility

We added proper aria attributes to the timepicker controls to make the component accessible. It's possible to change the values of those attributes by modyfing the component options:

Show code

script

        
            
            amLabel: 'AM',
            cancelLabel: 'Cancel',
            clearLabel: 'Clear',
            invalidLabel: 'Invalid Time Format',
            okLabel: 'Ok',
            pmLabel: 'PM',

Timepicker - API

Import

Show code

script

        
            
          <script>
            import {
              MDBTimepicker
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Name	Type	Default	Description
`amLabel`	String	`'AM'`	Changes AM button text
`pmLabel`	String	`'PM'`	Changes PM button text
`okLabel`	String	`'Cancel'`	Changes OK button text
`clearLabel`	String	`'Clear'`	Changes clear button text
`cancelLabel`	String	`'Cancel'`	Changes cancel button text
`container`	String	`'body'`	Allows to change the container for the modal. Container prop should be a valid selector of element that is mounted before the `Teleport` happens.
`disablePast`	Boolean	`false`	Disables selection of past
`disableFuture`	Boolean	`false`	Disables selection of future
`invalidLabel`	String	`'Invalid date format'`	Changes invalid date message
`validLabel`	String	`''`	Changes valid date message
`isValid`	Boolean		Allows to set validity value of the date. Requires `:isValidated="true"` to works
`isValidated`	Boolean		Allows for external date validation with `isValid` property
`label`	String	`''`	Sets label on Timepicker input element
`id`	String	`'MDBInput-random id'`	Sets id on Timepicker input element
`icon`	Boolean	`true`	Enables icon on Timepicker input element
`iconClass`	String	`'far fa-clock fa-sm'`	Changes icon displayed on Timepicker input element
`inline`	Boolean	`false`	Changes Tiempicker display mode to inline (dropdown)
`ripple`	Boolean	`true`	Adds ripple to buttons
`selfOpen`	Boolean	`false`	Enables opening Timepicker on input click
`housrFormat`	Number	`12`	Changes hours format. Use `12 \| 24`
`max`	Number \| String	`-`	Changes max available time
`min`	Number \| String	`-`	Changes min available time
`increment`	Number	`1`	Allows to set increment minutes by `1 \| 5 \| 10 \| 15 \| 30`
`v-model`	String	`''`	Returns current picked time

Methods

Name	Description	Example
`togglePicker`	Manually toggles open/close Timepicker	`pickerRef.togglePicker()`

Show code

        
            
              <template>
                <MDBTimepicker v-model="picker1" ref="pickerRef" />
                <MDBBtn @click.stop="pickerRef?.togglePicker()" color="primary">
                  Open
                </MDBBtn >
              </template>

        
            
            <script>
              import { MDBTimepicker, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from "vue";
            
              export default {
                components: {
                  MDBTimepicker,
                  MDBBtn
                },
                setup() {
                  const picker1 = ref("");
                  const pickerRef = ref("");
            
                  return {
                    picker1,
                    pickerRef
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { MDBTimepicker, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from "vue";
            
              const picker1 = ref("");
              const pickerRef = ref("");
            </script>

Events

Name	Description
`close`	This event fires immediately when the Tiempicker is closed.
`open`	This event fires immediately when the Tiempicker is opened.
`update:modelValue`	This event fires immediately when the Tiempicker value is changed.
`update:isValid`	This event fires immediately when the Tiempicker valid value is changed
`update:isValidated`	This event fires immediately when the Tiempicker validation value is changed

Show code

template

        
            
              <template>
                <MDBTimepicker v-model="picker1" @close="doSomething" />
              </template>

CSS variables

As part of MDB’s evolving CSS variables approach, timepicker now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Timepicker CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

Show code

        
            
        // .timepicker
        // &-wrapper
        --#{$prefix}timepicker-wrapper-bg: #{$timepicker-wrapper-bg};
        --#{$prefix}timepicker-elements-min-width: #{$timepicker-elements-min-width};
        --#{$prefix}timepicker-elements-min-height: #{$timepicker-elements-min-height};
        --#{$prefix}timepicker-elements-background: #{$timepicker-elements-background};
        --#{$prefix}timepicker-elements-border-top-right-radius: #{$timepicker-elements-border-top-right-radius};
        --#{$prefix}timepicker-elements-border-top-left-radius: #{$timepicker-elements-border-top-left-radius};
        --#{$prefix}timepicker-elements-media-border-bottom-left-radius: #{$timepicker-elements-media-border-bottom-left-radius};
        --#{$prefix}timepicker-head-bg: #{$timepicker-head-bg};
        --#{$prefix}timepicker-head-height: #{$timepicker-head-height};
        --#{$prefix}timepicker-head-border-top-right-radius: #{$timepicker-head-border-top-right-radius};
        --#{$prefix}timepicker-head-border-top-left-radius: #{$timepicker-head-border-top-left-radius};
        --#{$prefix}timepicker-head-padding-y: #{$timepicker-head-padding-y};
        --#{$prefix}timepicker-head-padding-right: #{$timepicker-head-padding-right};
        --#{$prefix}timepicker-head-padding-left: #{$timepicker-head-padding-left};
        --#{$prefix}timepicker-head-media-padding: #{$timepicker-head-media-padding};
        --#{$prefix}timepicker-head-media-padding-right: #{$timepicker-head-media-padding-right};
        --#{$prefix}timepicker-head-media-min-height: #{$timepicker-head-media-min-height};
        --#{$prefix}timepicker-head-inline-border-bottom-right-radius: #{$timepicker-head-inline-border-bottom-right-radius};
        --#{$prefix}timepicker-head-inline-border-bottom-left-radius: #{$timepicker-head-inline-border-bottom-left-radius};
        --#{$prefix}timepicker-button-font-size: #{$timepicker-button-font-size};
        --#{$prefix}timepicker-button-min-width: #{$timepicker-button-min-width};
        --#{$prefix}timepicker-button-font-weight: #{$timepicker-button-font-weight};
        --#{$prefix}timepicker-button-line-height: #{$timepicker-button-line-height};
        --#{$prefix}timepicker-button-border-radius: #{$timepicker-button-border-radius};
        --#{$prefix}timepicker-button-letter-spacing: #{$timepicker-button-letter-spacing};
        --#{$prefix}timepicker-button-color: #{$timepicker-button-color};
        --#{$prefix}timepicker-button-transition: #{$timepicker-button-transition};
        --#{$prefix}timepicker-button-padding-x: #{$timepicker-button-padding-x};
        --#{$prefix}timepicker-button-height: #{$timepicker-button-height};
        --#{$prefix}timepicker-button-margin-bottom: #{$timepicker-button-margin-bottom};
        --#{$prefix}timepicker-button-hover-bg: #{$timepicker-button-hover-bg};
        --#{$prefix}timepicker-button-focus-bg: #{$timepicker-button-focus-bg};
        --#{$prefix}timepicker-submit-inline-height: #{$timepicker-submit-inline-height};
        --#{$prefix}timepicker-submit-inline-min-width: #{$timepicker-submit-inline-min-width};
        --#{$prefix}timepicker-submit-inline-margin-left: #{$timepicker-submit-inline-margin-left};
        --#{$prefix}timepicker-submit-inline-color: #{$timepicker-submit-inline-color};
        --#{$prefix}timepicker-current-font-size: #{$timepicker-current-font-size};
        --#{$prefix}timepicker-current-font-weight: #{$timepicker-current-font-weight};
        --#{$prefix}timepicker-current-line-height: #{$timepicker-current-line-height};
        --#{$prefix}timepicker-current-letter-spacing: #{$timepicker-current-letter-spacing};
        --#{$prefix}timepicker-current-color: #{$timepicker-current-color};
        --#{$prefix}timepicker-current-opacity: #{$timepicker-current-opacity};
        --#{$prefix}timepicker-clock-wrapper-min-width: #{$timepicker-clock-wrapper-min-width};
        --#{$prefix}timepicker-clock-wrapper-max-width: #{$timepicker-clock-wrapper-max-width};
        --#{$prefix}timepicker-clock-wrapper-min-height: #{$timepicker-clock-wrapper-min-height};
        --#{$prefix}timepicker-mode-wrapper-font-size: #{$timepicker-mode-wrapper-font-size};
        --#{$prefix}timepicker-mode-wrapper-color: #{$timepicker-mode-wrapper-color};
        --#{$prefix}timepicker-clock-inner-top: #{$timepicker-clock-inner-top};
        --#{$prefix}timepicker-clock-inner-left: #{$timepicker-clock-inner-left};
        --#{$prefix}timepicker-clock-inner-transform: #{$timepicker-clock-inner-transform};
        --#{$prefix}timepicker-clock-inner-width: #{$timepicker-clock-inner-width};
        --#{$prefix}timepicker-clock-inner-height: #{$timepicker-clock-inner-height};
        --#{$prefix}timepicker-time-tips-inner-width: #{$timepicker-time-tips-inner-width};
        --#{$prefix}timepicker-time-tips-inner-height: #{$timepicker-time-tips-inner-height};
        --#{$prefix}timepicker-time-tips-inner-font-size: #{$timepicker-time-tips-inner-font-size};
        --#{$prefix}timepicker-time-tips-inner-font-weight: #{$timepicker-time-tips-inner-font-weight};
        --#{$prefix}timepicker-clock-width: #{$timepicker-clock-width};
        --#{$prefix}timepicker-clock-height: #{$timepicker-clock-height};
        --#{$prefix}timepicker-clock-bg: #{$timepicker-clock-bg};
        --#{$prefix}timepicker-time-tips-inner-active-color: #{$timepicker-time-tips-inner-active-color};
        --#{$prefix}timepicker-time-tips-inner-active-bg: #{$timepicker-time-tips-inner-active-bg};
        --#{$prefix}timepicker-time-tips-inner-active-font-weight: #{$timepicker-time-tips-inner-active-font-weight};
        --#{$prefix}timepicker-time-tips-inner-disabled-color: #{$timepicker-time-tips-inner-disabled-color};
        --#{$prefix}timepicker-dot-font-weight: #{$timepicker-dot-font-weight};
        --#{$prefix}timepicker-dot-line-height: #{$timepicker-dot-line-height};
        --#{$prefix}timepicker-dot-letter-spacing: #{$timepicker-dot-letter-spacing};
        --#{$prefix}timepicker-dot-color: #{$timepicker-dot-color};
        --#{$prefix}timepicker-dot-media-font-size: #{$timepicker-dot-media-font-size};
        --#{$prefix}timepicker-dot-media-font-weight: #{$timepicker-dot-media-font-weight};
        --#{$prefix}timepicker-dot-font-size: #{$timepicker-dot-font-size};
        --#{$prefix}timepicker-dot-opacity: #{$timepicker-dot-opacity};
        --#{$prefix}timepicker-current-inline-font-size: #{$timepicker-current-inline-font-size};
        --#{$prefix}timepicker-item-width: #{$timepicker-item-width};
        --#{$prefix}timepicker-item-height: #{$timepicker-item-height};
        --#{$prefix}timepicker-item-padding: #{$timepicker-item-padding};
        --#{$prefix}timepicker-item-font-size: #{$timepicker-item-font-size};
        --#{$prefix}timepicker-item-middle-dot-top: #{$timepicker-item-middle-dot-top};
        --#{$prefix}timepicker-item-middle-dot-left: #{$timepicker-item-middle-dot-left};
        --#{$prefix}timepicker-item-middle-dot-width: #{$timepicker-item-middle-dot-width};
        --#{$prefix}timepicker-item-middle-dot-height: #{$timepicker-item-middle-dot-height};
        --#{$prefix}timepicker-item-middle-dot-transform: #{$timepicker-item-middle-dot-transform};
        --#{$prefix}timepicker-item-middle-dot-border-radius: #{$timepicker-item-middle-dot-border-radius};
        --#{$prefix}timepicker-item-middle-dot-bg: #{$timepicker-item-middle-dot-bg};
        --#{$prefix}timepicker-hand-pointer-bg: #{$timepicker-hand-pointer-bg};
        --#{$prefix}timepicker-hand-pointer-bottom: #{$timepicker-hand-pointer-bottom};
        --#{$prefix}timepicker-hand-pointer-height: #{$timepicker-hand-pointer-height};
        --#{$prefix}timepicker-hand-pointer-left: #{$timepicker-hand-pointer-left};
        --#{$prefix}timepicker-hand-pointer-width: #{$timepicker-hand-pointer-width};
        --#{$prefix}timepicker-transform-transition: #{$timepicker-transform-transition};
        --#{$prefix}timepicker-time-tips-width: #{$timepicker-time-tips-width};
        --#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
        --#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
        --#{$prefix}timepicker-time-tips-font-size: #{$timepicker-time-tips-font-size};
        --#{$prefix}timepicker-time-tips-active-color: #{$timepicker-time-tips-active-color};
        --#{$prefix}timepicker-circle-top: #{$timepicker-circle-top};
        --#{$prefix}timepicker-circle-left: #{$timepicker-circle-left};
        --#{$prefix}timepicker-circle-width: #{$timepicker-circle-width};
        --#{$prefix}timepicker-circle-border-width: #{$timepicker-circle-border-width};
        --#{$prefix}timepicker-circle-border-color: #{$timepicker-circle-border-color};
        --#{$prefix}timepicker-circle-height: #{$timepicker-circle-height};
        --#{$prefix}timepicker-hour-mode-color: #{$timepicker-hour-mode-color};
        --#{$prefix}timepicker-hour-mode-opacity: #{$timepicker-hour-mode-opacity};
        --#{$prefix}timepicker-hour-mode-hover-bg: #{$timepicker-hour-mode-hover-bg};
        --#{$prefix}timepicker-hour-mode-font-size: #{$timepicker-hour-mode-font-size};
        --#{$prefix}timepicker-hour-mode-active-color: #{$timepicker-hour-mode-active-color};
        --#{$prefix}timepicker-footer-border-bottom-left-radius: #{$timepicker-footer-border-bottom-left-radius};
        --#{$prefix}timepicker-footer-border-bottom-right-radius: #{$timepicker-footer-border-bottom-right-radius};
        --#{$prefix}timepicker-footer-height: #{$timepicker-footer-height};
        --#{$prefix}timepicker-footer-padding-x: #{$timepicker-footer-padding-x};
        --#{$prefix}timepicker-footer-bg: #{$timepicker-footer-bg};
        --#{$prefix}timepicker-container-max-height: #{$timepicker-container-max-height};
        --#{$prefix}timepicker-container-box-shadow: #{$box-shadow-4};
        --#{$prefix}timepicker-icon-up-down-transition: #{$timepicker-icon-up-down-transition};
        --#{$prefix}timepicker-icon-up-down-transform: #{$timepicker-icon-up-down-transform};
        --#{$prefix}timepicker-icon-up-down-left: #{$timepicker-icon-up-down-left};
        --#{$prefix}timepicker-icon-up-down-width: #{$timepicker-icon-up-down-width};
        --#{$prefix}timepicker-icon-up-down-height: #{$timepicker-icon-up-down-height};
        --#{$prefix}timepicker-icon-up-top: #{$timepicker-icon-up-top};
        --#{$prefix}timepicker-icon-down-bottom: #{$timepicker-icon-down-bottom};
        --#{$prefix}timepicker-icon-btn-width: #{$timepicker-icon-btn-width};
        --#{$prefix}timepicker-icon-btn-height: #{$timepicker-icon-btn-height};
        --#{$prefix}timepicker-input-color: #{$timepicker-input-color};
        --#{$prefix}timepicker-clock-animation: #{$timepicker-clock-animation};

        // &-wrapper-inline
        --#{$prefix}timepicker-wrapper-inline-border-radius: #{$timepicker-wrapper-inline-border-radius};
      
        // @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape)
        --#{$prefix}timepicker-elements-media-border-bottom-left-radius
          
        // &-toggle-button
        --#{$prefix}timepicker-btn-icon-right: #{$timepicker-btn-icon-right};
        --#{$prefix}timepicker-btn-icon-top: #{$timepicker-btn-icon-top};
        --#{$prefix}timepicker-btn-icon-transform: #{$timepicker-btn-icon-transform};
        --#{$prefix}timepicker-btn-icon-transition: #{$timepicker-btn-icon-transition};
        --#{$prefix}timepicker-btn-icon-hover-color: #{$timepicker-btn-icon-hover-color};
        --#{$prefix}timepicker-btn-icon-focus-color: #{$timepicker-btn-icon-focus-color};
    
        // .timepicker-modal
        --#{$prefix}timepicker-zindex: #{$timepicker-zindex};

SCSS variables

Show code

SCSS

        
            
        $timepicker-zindex: 1065;

        $timepicker-wrapper-bg: rgba(0, 0, 0, 0.4);

        $timepicker-wrapper-inline-border-radius: 0.5rem;

        $timepicker-elements-min-width: 310px;
        $timepicker-elements-min-height: 325px;
        $timepicker-elements-background: $white;
        $timepicker-elements-border-top-right-radius: 0.6rem;
        $timepicker-elements-border-top-left-radius: 0.6rem;
        $timepicker-elements-media-border-bottom-left-radius: 0.5rem;

        $timepicker-head-bg: $primary;
        $timepicker-head-height: 100px;
        $timepicker-head-border-top-right-radius: 0.5rem;
        $timepicker-head-border-top-left-radius: 0.5rem;
        $timepicker-head-padding-y: 10px;
        $timepicker-head-padding-right: 24px;
        $timepicker-head-padding-left: 50px;

        $timepicker-head-media-padding: 10px;
        $timepicker-head-media-padding-right: 10px;
        $timepicker-head-media-min-height: 305px;
        $timepicker-head-inline-border-bottom-right-radius: 0.5rem;
        $timepicker-head-inline-border-bottom-left-radius: 0.5rem;

        $timepicker-button-font-size: 0.8rem;
        $timepicker-button-min-width: 64px;
        $timepicker-button-font-weight: 500;
        $timepicker-button-line-height: 40px;
        $timepicker-button-border-radius: 10px;
        $timepicker-button-letter-spacing: 0.1rem;
        $timepicker-button-color: $primary;
        $timepicker-button-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
          box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        $timepicker-button-hover-bg: rgba(0, 0, 0, 0.08);
        $timepicker-button-focus-bg: $timepicker-button-hover-bg;
        $timepicker-button-padding-x: 10px;
        $timepicker-button-height: 40px;
        $timepicker-button-margin-bottom: 10px;

        $timepicker-submit-inline-height: 48px;
        $timepicker-submit-inline-min-width: 48px;
        $timepicker-submit-inline-margin-left: 30px;
        $timepicker-submit-inline-color: $white;

        $timepicker-current-font-size: 3.75rem;
        $timepicker-current-font-weight: 300;
        $timepicker-current-line-height: 1.2;
        $timepicker-current-letter-spacing: -0.00833em;
        $timepicker-current-color: $white;
        $timepicker-current-opacity: 0.54;

        $timepicker-mode-wrapper-font-size: 18px;
        $timepicker-mode-wrapper-color: rgba(255, 255, 255, 0.54);

        $timepicker-clock-wrapper-min-width: 310px;
        $timepicker-clock-wrapper-max-width: 325px;
        $timepicker-clock-wrapper-min-height: 305px;

        $timepicker-clock-animation: show-up-clock 350ms linear;
        $timepicker-clock-width: 260px;
        $timepicker-clock-height: 260px;
        $timepicker-clock-bg: rgba(0, 0, 0, 0.07);

        $timepicker-clock-inner-top: 50%;
        $timepicker-clock-inner-left: 50%;
        $timepicker-clock-inner-transform: translate(-50%, -50%);
        $timepicker-clock-inner-width: 160px;
        $timepicker-clock-inner-height: 160px;

        $timepicker-time-tips-inner-width: 32px;
        $timepicker-time-tips-inner-height: 32px;
        $timepicker-time-tips-inner-font-size: 1.1rem;
        $timepicker-time-tips-inner-font-weight: 300;
        $timepicker-time-tips-inner-active-color: $white;
        $timepicker-time-tips-inner-active-bg: $primary;
        $timepicker-time-tips-inner-active-font-weight: 400;
        $timepicker-time-tips-inner-disabled-color: #b3afaf;

        $timepicker-dot-font-weight: 300;
        $timepicker-dot-line-height: 1.2;
        $timepicker-dot-letter-spacing: -0.00833em;
        $timepicker-dot-color: $white;
        $timepicker-dot-font-size: 3.75rem;
        $timepicker-dot-opacity: 0.54;
        $timepicker-dot-media-font-size: 3rem;
        $timepicker-dot-media-font-weight: 400;

        $timepicker-current-inline-font-size: 2.5rem;

        $timepicker-item-width: 20px;
        $timepicker-item-height: 20px;
        $timepicker-item-padding: 10px;
        $timepicker-item-font-size: 1.1em;

        $timepicker-item-middle-dot-top: 50%;
        $timepicker-item-middle-dot-left: 50%;
        $timepicker-item-middle-dot-width: 6px;
        $timepicker-item-middle-dot-height: $timepicker-item-middle-dot-width;
        $timepicker-item-middle-dot-transform: translate(-50%, -50%);
        $timepicker-item-middle-dot-border-radius: 50%;
        $timepicker-item-middle-dot-bg: $primary;

        $timepicker-hand-pointer-bg: $primary;
        $timepicker-hand-pointer-bottom: 50%;
        $timepicker-hand-pointer-height: 40%;
        $timepicker-hand-pointer-left: calc(50% - 1px);
        $timepicker-hand-pointer-width: 2px;

        $timepicker-transform-transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
          height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

        $timepicker-time-tips-width: 32px;
        $timepicker-time-tips-height: 32px;
        $timepicker-time-tips-font-size: 1.1rem;
        $timepicker-time-tips-active-color: $white;

        $timepicker-circle-top: -21px;
        $timepicker-circle-left: -15px;
        $timepicker-circle-width: 4px;
        $timepicker-circle-border-width: 14px;
        $timepicker-circle-border-color: $primary;
        $timepicker-circle-height: 4px;

        $timepicker-hour-mode-color: $white;
        $timepicker-hour-mode-opacity: 0.54;
        $timepicker-hour-mode-hover-bg: rgba(0, 0, 0, 0.15);
        $timepicker-hour-mode-active-color: $white;
        $timepicker-hour-mode-font-size: 2.5rem;

        $timepicker-footer-border-bottom-left-radius: 0.5rem;
        $timepicker-footer-border-bottom-right-radius: 0.5rem;
        $timepicker-footer-height: 56px;
        $timepicker-footer-padding-x: 12px;
        $timepicker-footer-bg: $white;

        $timepicker-container-max-height: calc(100% - 64px);

        $timepicker-icon-up-down-transition: 0.2s ease all;
        $timepicker-icon-up-down-transform: translate(-50%, -50%);
        $timepicker-icon-up-down-left: 50%;
        $timepicker-icon-up-down-width: 30px;
        $timepicker-icon-up-down-height: 30px;
        $timepicker-icon-up-top: -35px;
        $timepicker-icon-down-bottom: -47px;

        $timepicker-icon-btn-width: 30px;
        $timepicker-icon-btn-height: 30px;
        $timepicker-input-color: $primary;

        $timepicker-btn-icon-right: -10px;
        $timepicker-btn-icon-transform: translate(-50%, -50%);
        $timepicker-btn-icon-top: 50%;
        $timepicker-btn-icon-transition: all 0.3s ease;
        $timepicker-btn-icon-hover-color: $primary;
        $timepicker-btn-icon-focus-color: $primary;

Timepicker

Vue Bootstrap 5 Timepicker component

Basic example

Inline Timepicker with 12h

Inline Timepicker with 24h

Custom Icon

Without icon

Default time

Handle input value

Format 24h

Just Input

Increment

Max time

Max time with PM

Max time with AM

Min time

Min time with PM

Min time with AM

Max/Min hours

Maximum hour

Minimum hour

Disable past

Disable future

Accessibility

Related resources

Timepicker - API

Import

Properties

Methods

Events

CSS variables

SCSS variables