vue-3-material-date-picker
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

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

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

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

Package Sidebar

Install

npm i vue-3-material-date-picker

Weekly Downloads

142

Version

1.1.0

License

none

Unpacked Size

116 kB

Total Files

28

Last publish

Collaborators

  • matijanovosel