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.

<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.

<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. 

<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.

<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. 

<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. 

<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. 

<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. 

<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. 

<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. 

<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>
  <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>
  <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: 

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

<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() 
<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 
<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.

// :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

$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;