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.
<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>
Inline Timepicker with 12h
MDB Timepicker allows you to use a inline version timepicker. Default version is with 12h.
<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>
Inline Timepicker with 24h
MDB Timepicker allows you to use an inline version timepicker. Add
:hoursFormat="24" to make it use 24h format.
<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>
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.
<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>
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.
<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>
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.
<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>
Handle input value
Handling input value on modal approve is automatically binded to
v-model value of timepicker component.
<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>
Format 24h
Timepicker allows you to use time format with 24 hours. You can set it with the
:hoursFormat="24" property.
<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>
Just Input
You can set a timepicker to just an input with
:icon="false" and selfOpen properties.
<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>
Increment
You can use
:increment=" 5 | 10 | 15 | 30 " property to increment minutes value. Default
value for increment is 1.
<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>
Max time
Add max property to set maximum time value.
<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>
Max time with PM
Add max property to set maximum time value.
<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>
Max time with AM
Add max property to set maximum time value.
<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>
Min time
Add min property to set minimum time value.
<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>
Min time with PM
Add min property to set minimum time value.
<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>
Min time with AM
Add min property to set minimum time value.
<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>
Max/Min hours
Add min and max properties to limit the time value
<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>
Maximum hour
Pass only hour value to max property to set only maximum hour to timepicker.
<template>
<MDBTimepicker
label="Select a time"
v-model="picker23"
max="5"
/>
</template>
<script>
import { MDBTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBTimepicker
},
setup() {
const picker23 = ref("");
return {
picker23
};
}
};
</script>
Minimum hour
Pass only hour value to min property to set only minimum hour to timepicker.
<template>
<MDBTimepicker
label="Select a time"
v-model="picker24"
min="8"
/>
</template>
<script>
import { MDBTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBTimepicker
},
setup() {
const picker24 = ref("");
return {
picker24
};
}
};
</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:
amLabel: 'AM',
cancelLabel: 'Cancel',
clearLabel: 'Clear',
invalidLabel: 'Invalid Time Format',
okLabel: 'Ok',
pmLabel: 'PM',
Timepicker - API
Import
<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 |
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) |
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()
|
<template>
<MDBTimepicker v-model="picker1" ref="pickerRef" />
<MDBBtn @click.stop="$refs.pickerRef.togglePicker()" color="primary">
Open
</MDBBtn >
</template>
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 |
<template>
<MDBTimepicker v-model="picker1" @close="doSomething" />
</template>