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>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker1 = ref("");
</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>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker2 = ref("");
</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>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker3 = ref("");
</script>
Disable past
Use disablePast
prop to disallow selecting past dates.
<template>
<MDBDateTimepicker
label="Select Date and Time"
v-model="picker9"
disablePast
/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker9 = ref("");
return {
picker9
};
}
};
</script>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker9 = ref("");
</script>
Disable future
Use disableFuture
prop to disallow selecting future dates.
<template>
<MDBDateTimepicker
label="Select Date and Time"
v-model="picker10"
disableFuture
/>
</template>
<script>
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBDateTimepicker
},
setup() {
const picker10 = ref("");
return {
picker10
};
}
};
</script>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker10 = ref("");
</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>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker4 = ref("");
</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>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker5 = ref("");
const isValid = ref(true);
const isValidated = ref(false);
</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>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker6 = ref("");
</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>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker7 = ref("");
</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>
<script setup lang="ts">
import { MDBDateTimepicker } from "mdb-vue-ui-kit";
import { ref } from "vue";
const picker8 = ref("");
</script>
DateTimepicker - API
Import
<script>
import {
MDBDateTimepicker
} from 'mdb-vue-ui-kit';
</script>
Properties
Name | Type | Default | Description |
---|---|---|---|
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. |
datepicker |
Object | {} |
Allows to set datepicker options. |
dateFormat |
String | 'DD/MM/YYYY' |
Changes date format displayed in input. |
dateTimeSeparator |
String | ',' |
Changes separator between date and time. |
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. |
disablePast
|
Boolean | false |
Use to disallow selecting past dates and time. |
disableFuture
|
Boolean | false |
Use to disallow selecting future dates and time. |
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>
<MDBBtn @click="datetimepickerRef?.open()">Open</MDBBtn>
<MDBDateTimepicker ref="datetimepickerRef" v-model="picker1" label="Select a date" />
</template>
<script>
import { ref } from "vue";
import { MDBDateTimepicker, MDBBtn } from "mdb-vue-ui-kit";
export default {
components: {
MDBDateTimepicker,
MDBBtn,
},
setup() {
const picker1 = ref("");
const datetimepickerRef = ref(null);
return {
picker1,
datetimepickerRef,
};
},
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { MDBDateTimepicker, MDBBtn } from "mdb-vue-ui-kit";
const picker1 = ref("");
const datetimepickerRef = ref<InstanceType<typeof MDBDateTimepicker> | null>(null);
</script>
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>
CSS variables
// .buttons-container
--#{$prefix}datetimepicker-buttons-container-background-color: #{$datetimepicker-buttons-container-background-color};
--#{$prefix}datetimepicker-button-toggle-width: #{$datetimepicker-button-toggle-width};
--#{$prefix}datetimepicker-button-toggle-color: #{$datetimepicker-button-toggle-color};
--#{$prefix}datetimepicker-button-toggle-font-size: #{$datetimepicker-button-toggle-font-size};
--#{$prefix}datetimepicker-button-toggle-border-radius: #{$datetimepicker-button-toggle-border-radius};
--#{$prefix}datetimepicker-button-toggle-min-height: #{$datetimepicker-button-toggle-min-height};
--#{$prefix}datetimepicker-button-toggle-hover-background-color: #{$datetimepicker-button-toggle-hover-background-color};
// .datetimepicker-toggle-button
--#{$prefix}datetimepicker-toggle-button-transform: #{$datetimepicker-toggle-button-transform};
SCSS variables
$datetimepicker-buttons-container-background-color: $primary;
$datetimepicker-button-toggle-width: 50%;
$datetimepicker-button-toggle-color: white;
$datetimepicker-button-toggle-font-size: 23px;
$datetimepicker-button-toggle-border-radius: 10px;
$datetimepicker-button-toggle-min-height: 40px;
$datetimepicker-button-toggle-hover-background-color: rgba(0, 0, 0, 0.15);
$datetimepicker-toggle-button-transform: translate(-50%, -50%);