🚀 Installation

Install using your package manager of choice:

yarn add vue-3-material-date-picker

✨ Features

• Multiple date selection

• Customizable and themable

• Can be changed to any locale on the fly

📺 Demo

https://matija-components.vercel.app/date-picker

⚙️ Usage

Import the component locally or define it globally and include the css file:

<template>
  <div style="display: flex">
    <date-picker
      multiple
      :selected-items-text-formatter="(n) => `${n} dates selected`"
      :first-day-of-week="1"
      :allowed-dates="(date) => parseInt(date.split('-')[2], 10) % 2 === 0"
      :locale="locale"
      v-model="date"
    />
    <div style="margin-left: 30px">
      {{ date }}
      <button @click="changeDate" style="margin-left: 5px">Change</button>
      <button @click="changeLocale" style="margin-left: 5px">
        Change locale
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { DatePicker } from "vue-3-material-date-picker";
import "vue-3-material-date-picker/dist/style.css";

const date = ref(new Date().toISOString().substring(0, 10));
const locale = ref("en-US");

const changeDate = () => {
  date.value = "2023-09-23";
};

const changeLocale = () => {
  locale.value = "hr-HR";
};
</script>

📃 Props

| Name | Type | Default | Description | | ------------------------------- | -------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | | v-model | string/string[] | null | Standard two way input, must be passed as an ISO string (YYYY-mm-dd format e.g. 2023-04-23) | | min | string | 1970-01-01 | Allowed starting date, must be passed as an ISO string (YYYY-mm-dd format e.g. 2023-04-23) | | max | string | Current date | Allowed ending date, must be passed as an ISO string (YYYY-mm-dd format e.g. 2023-04-23) | | disabled | boolean | false | Makes the component uninteractable | | readonly | boolean | false | Makes the component uninteractable, but without the style of the disabled variant | | width | number/string | 290px | Sets the width of the element - can be provided as a string like "290px" or "290" or a number, defaults to 290px | | full-width | boolean | false | Ignores the previous width prop and sets the width to 100% of the parent container | | color | string | #2e79bd | Color of the various active component elements | | first-day-of-week | number/string | 0 | Sets the first day of the week, starting with 0 for Sunday | | hide-title | boolean | false | Hide the picker title | | show-adjacent-months | boolean | false | Toggles visibility of days from previous and next months | | locale | string | undefined | Sets the locale, accepts a string with a BCP 47 language tag e.g. en-us or hr-HR | | multiple | boolean | false | Allow the selection of multiple dates | | allowed-dates | function ((date: string) => boolean) | null | Restricts which dates can be selected | | selected-items-text-formatter | function ((n: number) => string) | Selected ${n} dates | Function for formatting the text for selecting multiple dates | | title-text-formatter | function ((date: string) => string) | undefined | Function for formatting the title text | | events | string[] | [] | Marks the provided dates on the component with a small dot |

🎺 Events

| Name | Type | Description | | -------------- | ------------------------ | ------------------------------------------------- | | change | (date: string) => void | Triggered when a date is selected | | select:year | () => void | Triggered when the user selects the year portion | | select:month | () => void | Triggered when the user selects the month portion | | select:day | () => void | Triggered when the user selects the day portion |

🧩 Slots

title

Use this slot if you want to override the date picker title, an example being:

<date-picker v-model="date">
  <template
    #title="{
      date,
      selectYears,
      selectMonths,
      selectDays,
    }"
  >
    {{ date }}
  </template>
</date-picker>

There are a few props being exposed:

| Name | Type | Default | Description | | -------------- | ---------- | ------- | --------------------------------------------------------------- | | date | string | null | Currently selected date | | selectYears | function | N/A | Helper function used for triggering the selection of the years | | selectMonths | function | N/A | Helper function used for triggering the selection of the months | | selectDays | function | N/A | Helper function used for triggering the selection of the days |