Vue Time Picker MDB Pro component
Vue Time Picker - Bootstrap 4 & Material Design
Vue Bootstrap time picker is a component which allows user to select a time in the Bootstrap form.
Basic examples MDB Pro component
<template>
<mdb-container>
<mdb-row>
<mdb-col col="6">
<mdb-time-picker
id="timePickerOne"
placeholder="Select your time"
label="format: am/pm"
@getValue="getPickerValue"
/>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbTimePicker, mdbContainer, mdbRow, mdbCol } from 'mdbvue';
export default {
name: 'TimePickerPage',
methods: {
getPickerValue(value) {
console.log(value);
}
},
components: {
mdbTimePicker,
mdbContainer,
mdbRow,
mdbCol
}
}
</script>
24 hour clock MDB Pro component
Set 12 or 24 hour clock.
<template>
<mdb-container>
<mdb-row>
<mdb-col col="6">
<mdb-time-picker
id="timePickerTwo"
placeholder="Select your time"
label="format: 24h"
:hoursFormat="24"
@getValue="getPickerValue"
/>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbTimePicker, mdbContainer, mdbRow, mdbCol } from 'mdbvue';
export default {
name: 'TimePickerPage',
methods: {
getPickerValue(value) {
console.log(value);
}
},
components: {
mdbTimePicker,
mdbContainer,
mdbRow,
mdbCol
}
}
</script>
Outline MDB Pro component
<template>
<mdb-container>
<mdb-row>
<mdb-col col="6">
<mdb-time-picker
outline
label="outline"
@getValue="getPickerValue"
/>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbTimePicker, mdbContainer, mdbRow, mdbCol } from 'mdbvue';
export default {
name: 'TimePickerPage',
methods: {
getPickerValue(value) {
console.log(value);
}
},
components: {
mdbTimePicker,
mdbContainer,
mdbRow,
mdbCol
}
}
</script>
TimePicker with icon MDB Pro component
<template>
<mdb-container>
<mdb-row>
<mdb-col col="6">
<mdb-time-picker
label="icon"
icon="clock"
@getValue="getPickerValue"
/>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbTimePicker, mdbContainer, mdbRow, mdbCol } from 'mdbvue';
export default {
name: 'TimePickerPage',
methods: {
getPickerValue(value) {
console.log(value);
}
},
components: {
mdbTimePicker,
mdbContainer,
mdbRow,
mdbCol
}
}
</script>
Keyboard navigation
Open time picker by pressing Enter
key and tab through available options - and press Enter
again to select one. To close a modal use Ecs
or Enter
key (once the time is picked). Use backspace
to go back from minutes to hour plate.
Time Picker - API
In this section you will find advanced information about the Time Picker component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
import { mdbTimePicker } from 'mdbvue';
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
color
|
String | 'primary-color' |
Changing picker elements color |
<mdb-time-picker color="secondary-color">
|
hoursFormat
|
Number | 12 |
Changing picker format |
<mdb-time-picker :hoursFormat="24">
|
id |
String |
|
Adding id attribute to the component. |
<mdb-time-picker id="timePickerOne">
|
label
|
String |
|
Select label. |
<mdb-time-picker label="format: am/pm">
|
placeholder
|
String | 'Select time' |
Select placeholder. |
<mdb-time-picker placeholder="Select your time">
|
outline
|
Boolean | false |
Applies outline style to a component |
<mdb-date-picker outline />
|
icon
|
String |
|
Adds icon to a datepicker's input |
<mdb-date-picker icon="clock" />
|
iconClass
|
String |
|
Adds custom class to a datepicker's icon |
<mdb-date-picker icon="clock" iconClass="yellow-text"
/>
|
far
|
Boolean | false |
Changes icon's style to regular |
<mdb-date-picker icon="paper-plane" far/>
|
fab
|
Boolean | false |
Changes icon's style to brands |
<mdb-date-picker icon="..." fab />
|
fal
|
Boolean | false |
Changes icon's style to light |
<mdb-date-picker icon="..." fal />
|
API Reference: Methods
Name | Parameters | Description | Example |
---|---|---|---|
@getValue |
value | Returns time-picker value. |
<mdb-time-picker @getValue="getPickersValue" />
|
v-on:focus |
e |
Emitted on input's native focus event, meaning when the
field gains focus.
|
<mdb-date-picker @focus="onFocus" />
|
v-on:blur |
e |
Emitted on input's native blur event, meaning when the
field looses focus.
|
<mdb-date-picker @blur="onBlur" />
|