A material date picker component for Vue 3.
Install using your package manager of choice:
yarn add vue-3-material-date-picker- Multiple date selection
- Customizable and themable
- Can be changed to any locale on the fly
https://matija-components.vercel.app/date-picker
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>| 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 |
| 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 |
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 |