DateTimepicker
Vue Bootstrap 5 DateTimepicker
DateTimepicker is a form that adds the function of selecting date and time without the necessity of using custom JavaScript code.
Note: Read the API tab to find all available options and advanced customization
Basic example
<template>
<MDBDateTimepicker label="Select a time" v-model="picker1"/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker1 = ref("");
return {
picker1
};
}
};
</script>
Inline version
You can use inline version with property inline.
<template>
<MDBDateTimepicker inline label="Select a time" v-model="picker2"/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker2 = ref("");
return {
picker2
};
}
};
</script>
Disabled
<template>
<MDBDateTimepicker disabled label="Select a time" v-model="picker3"/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker3 = ref("");
return {
picker3
};
}
};
</script>
Default values
You can set default date and time with properties defaultDate and
defaultTime.
<template>
<MDBDateTimepicker
label="Select Date and Time"
defaultTime="10:33 PM"
defaultDate="22/01/2019"
v-model="picker4"
/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker4 = ref("");
return {
picker4
};
}
};
</script>
Invalid label
Add invalidLabel or validLabel with specified value, to change the validation label messages.
<template>
<MDBDateTimepicker
label="Select Date and Time"
v-model="picker5"
invalidLabel="Correct your input"
validLabel="Your input is valid"
v-model:isValid="isValid"
v-model:isValidated="isValidated"
/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker5 = ref("");
const isValid = ref(true);
const isValidated = ref(false);
return {
picker5,
isValid,
isValidated
};
}
};
</script>
Input toggle
Add inputToggle to the picker component to enable toggling on
input click. It is also possible to set toggleButton property to
false to remove the toggle button.
<template>
<MDBDateTimepicker
label="Select Date and Time"
v-model="picker6"
:toggleButton="false"
inputToggle
/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker6 = ref("");
return {
picker6
};
}
};
</script>
Custom date and time options
Use datepicker or timepicker properties to set custom options from our
Datepicker and Timepicker components.
Datepicker options
<template>
<MDBDateTimepicker
label="Select Date and Time"
v-model="picker7"
:datepicker="{ format: 'DD, MMM, YYYY' }"
/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker7 = ref("");
return {
picker7
};
}
};
</script>
Timepicker options
<template>
<MDBDateTimepicker
label="Select Date and Time"
v-model="picker8"
:timepicker="{ hoursFormat: 24 }"
/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker8 = ref("");
return {
picker8
};
}
};
</script>
DateTimepicker - API
Import
<script>
import {
MDBDateTimepicker
} from 'mdb-vue-ui-kit';
</script>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
datepicker |
Object | {} |
Allows to set datepicker options. |
defaultDate |
String|Date|Number | - |
Allows to set default date. |
defaultTime
|
String|Date|Number | - |
Allows to set default time. |
disabled
|
Boolean | false |
Set a disabled attribute to input in wrapper. |
icon |
Boolean | true |
Enables icon on DateTimepicker input element |
iconClass |
String | 'far fa-calendar fa-sm' |
Changes icon displayed on DateTimepicker input element |
id
|
String | 'MDBInput-random id' |
Sets id on DateTimepicker input element |
inline
|
Boolean | false |
Allows to use a inline version of datetimepicker. |
inputToggle
|
Boolean | false |
Enables toggling picker on input click |
invalidLabel
|
String | 'Invalid date format' |
Allows to set the value of invalid label. |
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 DateTimepicker input element |
timepicker
|
Object | - |
Allows to set timepicker options. |
toggleButton
|
Boolean | true |
Allows to remove the picker toggle button |
v-model |
String | '' |
Returns current picked date and time |
Methods
| Name | Description | Example |
|---|---|---|
open |
Manually opens a DateTimepicker |
pickerRef.open()
|
close |
Manually closes a DateTimepicker |
pickerRef.close()
|
<template>
<MDBDateTimepicker v-model="picker" ref="pickerRef" />
<MDBBtn @click.stop="$refs.pickerRef.open()" color="primary">
Open
</MDBBtn>
</template>
Events
| Name | Description |
|---|---|
close
|
This event fires immediately when the DateTimepicker is closed. |
open
|
This event fires immediately when the DateTimepicker is opened. |
update:modelValue
|
This event fires immediately when the DateTimepicker value is changed. |
update:isValid
|
This event fires immediately when the DateTimepicker valid value is changed |
update:isValidated
|
This event fires immediately when the DateTimepicker validation value is changed |
<template>
<MDBDateTimepicker v-model="picker" @close="doSomething" />
</template>