Datepicker

Vue Bootstrap 5 Datepicker

Date picker is a component that adds the function of selecting date without the necessity of using a custom code.

Note: Read the API tab to find all available options and advanced customization

Basic example

The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. Date pickers can be embedded into dialogs on mobile and text field dropdowns on desktop.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker v-model="picker1" label="Select a date" />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker1 = ref("");

                  return {
                    picker1
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker1 = ref("");
            </script>

Inline version

Use the inline prop to initialize and set the default date for an inline datepicker inside a block element.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker v-model="picker2" inline label="Select a date" />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker2 = ref("");

                  return {
                    picker2
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker2 = ref("");
            </script>

Translations

The picker can be customized to add support for internationalization. Modify the component props to add translations.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker3"
                label="Select a date"
                title="Datum auswählen"
                :monthsFull="[
                  'Januar',
                  'Februar',
                  'März',
                  'April',
                  'Mai',
                  'Juni',
                  'Juli',
                  'August',
                  'September',
                  'Oktober',
                  'November',
                  'Dezember'
                ]"
                :monthsShort="[
                  'Jan',
                  'Feb',
                  'Mär',
                  'Apr',
                  'Mai',
                  'Jun',
                  'Jul',
                  'Aug',
                  'Sep',
                  'Okt',
                  'Nov',
                  'Dez'
                ]"
                :weekdaysFull="[
                  'Sonntag',
                  'Montag',
                  'Dienstag',
                  'Mittwoch',
                  'Donnerstag',
                  'Freitag',
                  'Samstag'
                ]"
                :weekdaysShort="['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam']"
                :weekdaysNarrow="['S', 'M', 'D', 'M', 'D', 'F', 'S']"
                okBtnText="Ok"
                clearBtnText="Klar"
                cancelBtnText="Schließen"
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker3 = ref("");

                  return {
                    picker3
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker3 = ref("");
            </script>

Formats

Use format property to display date in a human-friendly format.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker4"
                label="Select a date"
                format="DD, MMM, YYYY"
                placeholder="DD, MMM, YYYY"
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker4 = ref("");

                  return {
                    picker4
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker4 = ref("");
            </script>

Formatting rules

The following rules can be used to format any date:

Rule	Description	Result
`D`	Day of the month	1 – 31
`DD`	Day of the month with a leading zero	01 – 31
`ddd`	Day of the week in short form	Sun – Sat
`dddd`	Day of the week in full form	Sunday – Saturday
`M`	Month of the year	1 – 12
`MM`	Month of the year with a leading zero	01 – 12
`MMM`	Month name in short form	Jan – Dec
`MMMM`	Month name in full form	January – December
`YY`	Year in short form *	00 – 99
`YYYY`	Year in full form	2000 – 2999

Date limits

Set the minimum and maximum selectable dates with the min and max props.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker5"
                label="Select a date"
                min="10/06/2020"
                max="10/06/2022"
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker5 = ref("");

                  return {
                    picker5
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker5 = ref("");
            </script>

Disable past

Use the disablePast option to disallow past date selection.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker9"
                label="Select a date"
                disablePast
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker9 = ref("");
                  return {
                    picker9
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";
 
              const picker9 = ref("");
            </script>

Disable future

Use the disableFuture option to disallow past date selection.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker10"
                label="Select a date"
                disableFuture
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker10 = ref("");
                  return {
                    picker10
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker10 = ref("");
            </script>

Disabled dates

The fitler option accept function in which you can specify conditions for date filtering. A result of true indicates that the date should be valid and a result of false indicates that it should be disabled. In the following example all saturdays and sundays will be disabled.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker6"
                label="Select a date"
                :filter="(date: number) => date.day() === 0 || date.day() === 6"
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker6 = ref("");

                  return {
                    picker6
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker6 = ref("");
            </script>

Input toggle

Add inputToggle property to enable toggling on input click. It is also possible to set toggleButton option to false to remove the toggle button.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker7"
                label="Select a date"
                inputToggle
                :toggleButton="false"
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker7 = ref("");

                  return {
                    picker7
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker7 = ref("");
            </script>

Custom toggle icon

You can customize the toggle icon by adding a toggleIcon alternative string template to the component.

Select a date

Show code

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker8"
                label="Select a date"
                toggleIcon="<i class='fas fa-calendar datepicker-toggle-icon'></i>"
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker8 = ref("");
                  
                  return {
                    picker8
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker8 = ref("");
            </script>

Confirm date on select

If you want to be able to confirm the date on select and close the modal you can add confirmDateOnSelect prop to you MDBDatepicker component. You can hide the buttons from the modal if they are not going to be used.

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker11"
                label="Select a date"
                confirmDateOnSelect
                removeClearBtn
                removeCancelBtn
                removeOkBtn
              />
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker11 = ref("");

                  return {
                    picker11
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";
                  
              const picker11 = ref("");
            </script>

Custom header content

You can edit the contents MDBDatepicker header by adding a named scoped slot and customHeader prop. You have access to 4 values: selected, headerWeekday, headerMonth and headerMonthday which you can use however you like.

template
script
typescript

TypeScript

        
            
            <template>
              <MDBDatepicker
                v-model="picker12"
                label="Select a date"
                customHeader
              >
                <template
                  #header="{
                    selected,
                    headerWeekday,
                    headerMonth,
                    headerMonthday,
                  }"
                >
                  <div class="text-white" style="font-size: 12px">
                    <p class="m-0">
                      Selected: Weekday: {{ headerWeekday }} - Day:
                      {{ headerMonthday }} - Month: {{ headerMonth }}
                    </p>
                    <p>Fulldate: {{ selected }}</p>
                  </div>
                </template>
              </MDBDatepicker>
            </template>

        
            
            <script>
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBDatepicker
                },
                setup() {
                  const picker12 = ref("");

                  return {
                    picker12
                  };
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatepicker } from "mdb-vue-ui-kit";

              const picker12 = ref("");
            </script>

Accessibility

We added proper aria attributes to the datepicker controls to make the component accessible. It's possible to change the values of those attributes by modyfing the component properties:

Show code

script

        
            
            okBtnLabel: 'Confirm selection',
            clearBtnLabel: 'Clear selection',
            cancelBtnLabel: 'Cancel selection',
            nextMonthLabel: 'Next month',
            prevMonthLabel: 'Previous month',
            nextYearLabel: 'Next year',
            prevYearLabel: 'Previous year',
            nextMultiYearLabel: 'Next 24 years',
            prevMultiYearLabel: 'Previous 24 years',
            switchToMultiYearViewLabel: 'Choose year and month',
            switchToDayViewLabel: 'Choose date',

Datepicker - API

Import

Show code

script

        
            
          <script>
            import {
              MDBDatepicker
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Name	Type	Default	Description
`cancelBtnLabel`	String	`'Cancel selection'`	Changes cancel button aria label
`cancelBtnText`	String	`'Cancel'`	Changes cancel button text
`clearBtnLabel`	String	`'Clear selection'`	Changes clear button aria label
`clearBtnText`	String	`'Clear'`	Changes clear button text
`confirmDateOnSelect`	Boolean	`false`	Allows to pick date on select
`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.
`customHeader`	Boolean	`false`	Allows to change header content together with named scoped slots.
`disablePast`	Boolean	`false`	Disables selection of past dates
`disableFuture`	Boolean	`false`	Disables selection of future dates
`filter`	Function	`() => false`	Enables filtering
`format`	String	`'DD/MM/YYYY'`	Changes date format displayed in input
`inline`	Boolean	`false`	Changes datepicker display mode to inline (dropdown)
`inputToggle`	Boolean	`false`	Enables input toggling
`max`	Date	`-`	Changes max available date
`min`	Date	`-`	Changes min available date
`monthsFull`	Array	`[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ]`	Changes array of months full names
`monthsShort`	Array	`['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`	Changes array of months short names
`nextMonthLabel`	String	`'Next month'`	Changes next button aria label in days view
`nextMultiYearLabel`	String	`'Next 24 years'`	Changes next button aria label in years view
`nextYearLabel`	String	`'Next year'`	Changes next button aria label in months view
`okBtnLabel`	String	`'Confirm selection'`	Changes ok button aria label
`okBtnText`	String	`'Ok'`	Changes ok button text
`prevMonthLabel`	String	`'Previous month'`	Changes previous button aria label in days view
`prevMultiYearLabel`	String	`'Previous 24 years'`	Changes previous button aria label in years view
`prevYearLabel`	String	`'Previous year'`	Changes previous button aria label in months view
`removeClearBtn`	Boolean	`false`	Removes `clear` button from datepicker modal
`removeCancelBtn`	Boolean	`false`	Removes `cancel` button from datepicker modal
`removeOkBtn`	Boolean	`false`	Removes `ok` button from datepicker modal
`startDate`	String	`''`	Changes default date to which datepicker will navigate
`startDay`	Number	`0`	Changes default start day (0 for Sunday, 1 for Monday)
`switchToDayViewLabel`	String	`'Choose date'`	Changes view change button aria label in years view
`switchToMultiYearViewLabel`	String	`'Choose year and month'`	Changes view change button aria label in days view
`title`	String	`'Select date'`	Changes datepicker title
`toggleButton`	Boolean	`false`	Enables toggle button
`toggleIcon`	String	`"<i class='far fa-calendar datepicker-toggle-icon'></i>"`	Defines toggle icon template
`weekdaysFull`	Array	`['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`	Changes array of weekdays full names
`weekdaysNarrow`	Array	`['S', 'M', 'T', 'W', 'T', 'F', 'S']`	Changes array of weekdays narrow names
`weekdaysShort`	Array	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	Changes array of weekdays short names
`view`	String	`'day'`	Changes default datepicker view (day/year/month)
`v-model`	String	`''`	Returns current picked date

Methods

Name	Description	Example
`open`	Manually opens a datepicker	`pickerRef.open()`
`close`	Manually closes a datepicker	`pickerRef.close()`

Show code

        
            
              <template>
                <MDBBtn @click="datepickerRef?.open()">Open</MDBBtn>
                <MDBDatepicker ref="datepickerRef" v-model="picker1" label="Select a date" />
              </template>

        
            
              <script>
                import { ref } from "vue";
                import { MDBDatepicker, MDBBtn } from "mdb-vue-ui-kit";
                
                export default {
                  components: {
                    MDBDatepicker,
                    MDBBtn,
                  },
                  setup() {
                    const picker1 = ref("");
                    const datepickerRef = ref(null);
                
                    return {
                      picker1,
                      datepickerRef,
                    };
                  },
                };
              </script>

        
            
              <script setup lang="ts">
                import { ref } from "vue";
                import { MDBDatepicker, MDBBtn } from "mdb-vue-ui-kit";
                
                const picker1 = ref("");
                const datepickerRef = ref<InstanceType<typeof MDBDatepicker> | null>(null);
              </script>

Events

Name	Description
`close`	This event fires immediately when the datepicker is closed.
`open`	This event fires immediately when the datepicker is opened.
`update:modelValue`	This event fires immediately when the datepicker value is changed.
`update:isValid`	This event fires immediately when the datepicker valid value is changed
`update:isValidated`	This event fires immediately when the datepicker validation value is changed
`viewChanged`	This event fires immediately when the datepicker view is changed

Show code

template

        
            
              <template>
                <MDBDatepicker v-model="picker1" @close="doSomething" />
              </template>

CSS variables

As part of MDB’s evolving CSS variables approach, datepicker now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Datepicker CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

Show code

        
            
        // :root
        --#{$prefix}datepicker-backdrop-background-color: #{$datepicker-backdrop-background-color};
        --#{$prefix}datepicker-zindex: #{$datepicker-zindex};
        --#{$prefix}datepicker-container-zindex: #{$datepicker-container-zindex};
        --#{$prefix}datepicker-toggle-right: #{$datepicker-toggle-right};
        --#{$prefix}datepicker-toggle-top: #{$datepicker-toggle-top};
        --#{$prefix}datepicker-toggle-focus-color: #{$datepicker-toggle-focus-color};

        // .datepicker-dropdown-container
        --#{$prefix}datepicker-dropdown-container-width: #{$datepicker-dropdown-container-width};
        --#{$prefix}datepicker-dropdown-container-height: #{$datepicker-dropdown-container-height};
        --#{$prefix}datepicker-dropdown-container-background-color: #{$datepicker-dropdown-container-background-color};
        --#{$prefix}datepicker-dropdown-container-border-radius: #{$datepicker-dropdown-container-border-radius};
        --#{$prefix}datepicker-dropdown-container-box-shadow: #{$datepicker-dropdown-container-box-shadow};
      
        // .datepicker-modal-container {
        --#{$prefix}datepicker-modal-container-transform: #{$datepicker-modal-container-transform};
        --#{$prefix}datepicker-modal-container-width: #{$datepicker-modal-container-width};
        --#{$prefix}datepicker-modal-container-height: #{$datepicker-modal-container-height};
        --#{$prefix}datepicker-modal-container-background-color: #{$datepicker-modal-container-background-color};
        --#{$prefix}datepicker-modal-container-border-radius: #{$datepicker-modal-container-border-radius};
        --#{$prefix}datepicker-modal-container-box-shadow: #{$datepicker-modal-container-box-shadow};
        --#{$prefix}datepicker-modal-container-date-media-margin-top: #{$datepicker-modal-container-date-media-margin-top};
        --#{$prefix}datepicker-modal-container-day-cell-media-width: #{$datepicker-modal-container-day-cell-media-width};
        --#{$prefix}datepicker-modal-container-day-cell-media-height: #{$datepicker-modal-container-day-cell-media-height};
        --#{$prefix}datepicker-modal-container-media-width: #{$datepicker-modal-container-media-width};
        --#{$prefix}datepicker-modal-container-media-height: #{$datepicker-modal-container-media-height};
        --#{$prefix}datepicker-header-border-radius-landscape: #{$datepicker-header-border-radius-landscape};
        --#{$prefix}datepicker-header-height: #{$datepicker-header-height};
        --#{$prefix}datepicker-header-padding-x: #{$datepicker-header-padding-x};
        --#{$prefix}datepicker-header-background-color: #{$datepicker-header-background-color};
        --#{$prefix}datepicker-header-border-radius: #{$datepicker-header-border-radius};
        --#{$prefix}datepicker-title-height: #{$datepicker-title-height};
        --#{$prefix}datepicker-title-text-font-size: #{$datepicker-title-text-font-size};
        --#{$prefix}datepicker-title-text-font-weight: #{$datepicker-title-text-font-weight};
        --#{$prefix}datepicker-title-text-letter-spacing: #{$datepicker-title-text-letter-spacing};
        --#{$prefix}datepicker-title-text-color: #{$datepicker-title-text-color};
        --#{$prefix}datepicker-date-height: #{$datepicker-date-height};
        --#{$prefix}datepicker-date-text-font-size: #{$datepicker-date-text-font-size};
        --#{$prefix}datepicker-date-text-font-weight: #{$datepicker-date-text-font-weight};
        --#{$prefix}datepicker-date-text-color: #{$datepicker-date-text-color};
        --#{$prefix}datepicker-footer-height: #{$datepicker-footer-height};
        --#{$prefix}datepicker-footer-padding-x: #{$datepicker-footer-padding-x};
        --#{$prefix}datepicker-footer-btn-background-color: #{$datepicker-footer-btn-background-color};
        --#{$prefix}datepicker-footer-btn-color: #{$datepicker-footer-btn-color};
        --#{$prefix}datepicker-footer-btn-padding-x: #{$datepicker-footer-btn-padding-x};
        --#{$prefix}datepicker-footer-btn-font-size: #{$datepicker-footer-btn-font-size};
        --#{$prefix}datepicker-footer-btn-font-weight: #{$datepicker-footer-btn-font-weight};
        --#{$prefix}datepicker-footer-btn-height: #{$datepicker-footer-btn-height};
        --#{$prefix}datepicker-footer-btn-line-height: #{$datepicker-footer-btn-line-height};
        --#{$prefix}datepicker-footer-btn-letter-spacing: #{$datepicker-footer-btn-letter-spacing};
        --#{$prefix}datepicker-footer-btn-border-radius: #{$datepicker-footer-btn-border-radius};
        --#{$prefix}datepicker-footer-btn-margin-bottom: #{$datepicker-footer-btn-margin-bottom};
        --#{$prefix}datepicker-footer-btn-state-background-color: #{$datepicker-footer-btn-state-background-color};
      
        // .datepicker-main
        --#{$prefix}datepicker-date-controls-padding-top: #{$datepicker-date-controls-padding-top};
        --#{$prefix}datepicker-date-controls-padding-x: #{$datepicker-date-controls-padding-x};
        --#{$prefix}datepicker-date-controls-color: #{$datepicker-date-controls-color};
        --#{$prefix}datepicker-view-change-button-padding: #{$datepicker-view-change-button-padding};
        --#{$prefix}datepicker-view-change-button-color: #{$datepicker-view-change-button-color};
        --#{$prefix}datepicker-view-change-button-font-weight: #{$datepicker-view-change-button-font-weight};
        --#{$prefix}datepicker-view-change-button-font-size: #{$datepicker-view-change-button-font-size};
        --#{$prefix}datepicker-view-change-button-border-radius: #{$datepicker-view-change-button-border-radius};
        --#{$prefix}datepicker-view-change-button-state-background-color: #{$datepicker-view-change-button-state-background-color};
        --#{$prefix}datepicker-view-change-button-after-border-width: #{$datepicker-view-change-button-after-border-width};
        --#{$prefix}datepicker-view-change-button-after-margin-left: #{$datepicker-view-change-button-after-margin-left};
        --#{$prefix}datepicker-arrow-controls-margin-top: #{$datepicker-arrow-controls-margin-top};
        --#{$prefix}datepicker-previous-button-width: #{$datepicker-previous-button-width};
        --#{$prefix}datepicker-previous-button-height: #{$datepicker-previous-button-height};
        --#{$prefix}datepicker-previous-button-line-height: #{$datepicker-previous-button-line-height};
        --#{$prefix}datepicker-previous-button-color: #{$datepicker-previous-button-color};
        --#{$prefix}datepicker-previous-button-margin-right: #{$datepicker-previous-button-margin-right};
        --#{$prefix}datepicker-previous-button-state-background-color: #{$datepicker-previous-button-state-background-color};
        --#{$prefix}datepicker-previous-button-state-border-radius: #{$datepicker-previous-button-state-border-radius};
        --#{$prefix}datepicker-previous-button-after-margin: #{$datepicker-previous-button-after-margin};
        --#{$prefix}datepicker-previous-button-after-border-width: #{$datepicker-previous-button-after-border-width};
        --#{$prefix}datepicker-previous-button-after-transform: #{$datepicker-previous-button-after-transform};
        --#{$prefix}datepicker-next-button-width: #{$datepicker-next-button-width};
        --#{$prefix}datepicker-next-button-height: #{$datepicker-next-button-height};
        --#{$prefix}datepicker-next-button-line-height: #{$datepicker-next-button-line-height};
        --#{$prefix}datepicker-next-button-color: #{$datepicker-next-button-color};
        --#{$prefix}datepicker-next-button-margin-background-color: #{$datepicker-next-button-margin-background-color};
        --#{$prefix}datepicker-next-button-state-border-radius: #{$datepicker-next-button-state-border-radius};
        --#{$prefix}datepicker-next-button-after-margin: #{$datepicker-next-button-after-margin};
        --#{$prefix}datepicker-next-button-after-border-width: #{$datepicker-next-button-after-border-width};
        --#{$prefix}datepicker-next-button-after-transform: #{$datepicker-next-button-after-transform};
        --#{$prefix}datepicker-view-padding-x: #{$datepicker-view-padding-x};
        --#{$prefix}datepicker-table-width: #{$datepicker-table-width};
        --#{$prefix}datepicker-day-heading-width: #{$datepicker-day-heading-width};
        --#{$prefix}datepicker-day-heading-height: #{$datepicker-day-heading-height};
        --#{$prefix}datepicker-day-heading-font-size: #{$datepicker-day-heading-font-size};
        --#{$prefix}datepicker-day-heading-font-weight: #{$datepicker-day-heading-font-weight};
        --#{$prefix}datepicker-cell-disabled-color: #{$datepicker-cell-disabled-color};
        --#{$prefix}datepicker-cell-hover-background-color: #{$datepicker-cell-hover-background-color};
        --#{$prefix}datepicker-cell-selected-background-color: #{$datepicker-cell-selected-background-color};
        --#{$prefix}datepicker-cell-selected-color: #{$datepicker-cell-selected-color};
        --#{$prefix}datepicker-cell-focused-background-color: #{$datepicker-cell-focused-background-color};
        --#{$prefix}datepicker-cell-focused-selected-background-color: #{$datepicker-cell-focused-selected-background-color};
        --#{$prefix}datepicker-cell-border-width: #{$datepicker-cell-border-width};
        --#{$prefix}datepicker-cell-border-color: #{$datepicker-cell-border-color};
        --#{$prefix}datepicker-small-cell-width: #{$datepicker-small-cell-width};
        --#{$prefix}datepicker-small-cell-height: #{$datepicker-small-cell-height};
        --#{$prefix}datepicker-small-cell-content-width: #{$datepicker-small-cell-content-width};
        --#{$prefix}datepicker-small-cell-content-height: #{$datepicker-small-cell-content-height};
        --#{$prefix}datepicker-small-cell-content-line-height: #{$datepicker-small-cell-content-line-height};
        --#{$prefix}datepicker-small-cell-content-border-radius: #{$datepicker-small-cell-content-border-radius};
        --#{$prefix}datepicker-small-cell-content-font-size: #{$datepicker-small-cell-content-font-size};
        --#{$prefix}datepicker-large-cell-width: #{$datepicker-large-cell-width};
        --#{$prefix}datepicker-large-cell-height: #{$datepicker-large-cell-height};
        --#{$prefix}datepicker-large-cell-content-width: #{$datepicker-large-cell-content-width};
        --#{$prefix}datepicker-large-cell-content-height: #{$datepicker-large-cell-content-height};
        --#{$prefix}datepicker-large-cell-content-line-height: #{$datepicker-large-cell-content-line-height};
        --#{$prefix}datepicker-large-cell-content-padding-y: #{$datepicker-large-cell-content-padding-y};
        --#{$prefix}datepicker-large-cell-content-padding-x: #{$datepicker-large-cell-content-padding-x};
        --#{$prefix}datepicker-large-cell-content-border-radius: #{$datepicker-large-cell-content-border-radius};

SCSS variables

Show code

SCSS

        
            
        $datepicker-zindex: 1065;
        $datepicker-container-zindex: 1066;

        $datepicker-toggle-right: -10px;
        $datepicker-toggle-top: 50%;
        $datepicker-toggle-focus-color: $primary;

        $datepicker-backdrop-background-color: rgba(0, 0, 0, 0.4);

        $datepicker-dropdown-container-width: 328px;
        $datepicker-dropdown-container-height: 380px;
        $datepicker-dropdown-container-background-color: $white;
        $datepicker-dropdown-container-border-radius: 0.5rem;
        $datepicker-dropdown-container-box-shadow: $box-shadow-4;

        $datepicker-modal-container-transform: translate(-50%, -50%);
        $datepicker-modal-container-width: 328px;
        $datepicker-modal-container-height: 512px;
        $datepicker-modal-container-background-color: $white;
        $datepicker-modal-container-border-radius: 0.6rem 0.6rem 0.5rem 0.5rem;
        $datepicker-modal-container-box-shadow: $datepicker-dropdown-container-box-shadow;
        $datepicker-modal-container-date-media-margin-top: 100px;
        $datepicker-modal-container-day-cell-media-width: 32px;
        $datepicker-modal-container-day-cell-media-height: $datepicker-modal-container-day-cell-media-width;
        $datepicker-modal-container-media-width: 475px;
        $datepicker-modal-container-media-height: 360px;

        $datepicker-header-height: 120px;
        $datepicker-header-padding-x: 24px;
        $datepicker-header-background-color: $primary;
        $datepicker-header-border-radius: 0.5rem 0.5rem 0 0;
        $datepicker-header-border-radius-landscape: 0.5rem 0 0 0.5rem;

        $datepicker-title-height: 32px;
        $datepicker-title-text-font-size: 10px;
        $datepicker-title-text-font-weight: 400;
        $datepicker-title-text-letter-spacing: 1.7px;
        $datepicker-title-text-color: $white;

        $datepicker-date-height: 72px;
        $datepicker-date-text-font-size: 34px;
        $datepicker-date-text-font-weight: 400;
        $datepicker-date-text-color: $white;

        $datepicker-date-controls-padding-top: 10px;
        $datepicker-date-controls-padding-x: 12px;

        $datepicker-date-controls-color: rgba(0, 0, 0, 0.64);

        $datepicker-view-change-button-padding: 10px;
        $datepicker-view-change-button-color: #666;
        $datepicker-view-change-button-font-weight: 500;
        $datepicker-view-change-button-font-size: 0.9rem;
        $datepicker-view-change-button-border-radius: 10px;
        $datepicker-view-change-button-state-background-color: #eee;
        $datepicker-view-change-button-after-border-width: 5px;
        $datepicker-view-change-button-after-margin-left: 5px;

        $datepicker-arrow-controls-margin-top: 10px;

        $datepicker-previous-button-width: 40px;
        $datepicker-previous-button-height: $datepicker-previous-button-width;
        $datepicker-previous-button-line-height: $datepicker-previous-button-height;
        $datepicker-previous-button-color: rgba(0, 0, 0, 0.64);
        $datepicker-previous-button-margin-right: 24px;
        $datepicker-previous-button-state-background-color: #eee;
        $datepicker-previous-button-state-border-radius: 50%;

        $datepicker-previous-button-after-margin: 15.5px;
        $datepicker-previous-button-after-border-width: 2px;
        $datepicker-previous-button-after-transform: translateX(2px) rotate(-45deg);

        $datepicker-next-button-width: 40px;
        $datepicker-next-button-height: $datepicker-next-button-width;
        $datepicker-next-button-line-height: $datepicker-next-button-height;
        $datepicker-next-button-color: rgba(0, 0, 0, 0.64);
        $datepicker-next-button-margin-background-color: #eee;
        $datepicker-next-button-state-border-radius: 50%;

        $datepicker-next-button-after-margin: 15.5px;
        $datepicker-next-button-after-border-width: 2px;
        $datepicker-next-button-after-transform: translateX(-2px) rotate(45deg);

        $datepicker-view-padding-x: 12px;
        $datepicker-table-width: 304px;

        $datepicker-day-heading-width: 40px;
        $datepicker-day-heading-height: $datepicker-day-heading-width;
        $datepicker-day-heading-font-size: 12px;
        $datepicker-day-heading-font-weight: 400;

        $datepicker-cell-disabled-color: #ccc;
        $datepicker-cell-hover-background-color: #d3d3d3;
        $datepicker-cell-selected-background-color: $primary;
        $datepicker-cell-selected-color: $white;
        $datepicker-cell-focused-background-color: #eee;
        $datepicker-cell-focused-selected-background-color: $primary;
        $datepicker-cell-border-width: 1px;
        $datepicker-cell-border-color: $black;

        $datepicker-small-cell-width: 40px;
        $datepicker-small-cell-height: $datepicker-small-cell-width;

        $datepicker-small-cell-content-width: 36px;
        $datepicker-small-cell-content-height: $datepicker-small-cell-content-width;
        $datepicker-small-cell-content-line-height: $datepicker-small-cell-content-height;
        $datepicker-small-cell-content-border-radius: 50%;
        $datepicker-small-cell-content-font-size: 13px;

        $datepicker-large-cell-width: 76px;
        $datepicker-large-cell-height: 42px;

        $datepicker-large-cell-content-width: 72px;
        $datepicker-large-cell-content-height: 40px;
        $datepicker-large-cell-content-line-height: $datepicker-large-cell-content-height;
        $datepicker-large-cell-content-padding-y: 1px;
        $datepicker-large-cell-content-padding-x: 2px;
        $datepicker-large-cell-content-border-radius: 999px;

        $datepicker-footer-height: 56px;
        $datepicker-footer-padding-x: $datepicker-view-padding-x;

        $datepicker-footer-btn-background-color: $white;
        $datepicker-footer-btn-color: $primary;
        $datepicker-footer-btn-padding-x: 10px;
        $datepicker-footer-btn-font-size: 0.8rem;
        $datepicker-footer-btn-font-weight: 500;
        $datepicker-footer-btn-height: 40px;
        $datepicker-footer-btn-line-height: $datepicker-footer-btn-height;
        $datepicker-footer-btn-letter-spacing: 0.1rem;
        $datepicker-footer-btn-border-radius: 10px;
        $datepicker-footer-btn-margin-bottom: 10px;
        $datepicker-footer-btn-state-background-color: #eee;

Datepicker

Vue Bootstrap 5 Datepicker

Basic example

Inline version

Translations

Formats

Formatting rules

Date limits

Disable past

Disable future

Disabled dates

Input toggle

Custom toggle icon

Confirm date on select

Custom header content

Accessibility

Related resources

Datepicker - API

Import

Properties

Methods

Events

CSS variables

SCSS variables