vue-3-material-date-picker

Vue material date picker

A material date picker component for Vue 3.

🚀 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

🎺 Events

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