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%);