## 🚀 Installation
Install using your package manager of choice:
```bash
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:
```vue
{{ date }}
```
## 📃 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:
```vue
{{ date }}
```
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 |