Vue-3-material-date-picker NPM

🚀 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