Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubhadip/vuejs3-datepicker
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
https://github.com/shubhadip/vuejs3-datepicker
calendar date date-picker datepicker javascript typescript vue vue3 vuejs
Last synced: 1 day ago
JSON representation
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
- Host: GitHub
- URL: https://github.com/shubhadip/vuejs3-datepicker
- Owner: shubhadip
- License: mit
- Created: 2020-11-07T10:39:06.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-02T08:27:31.000Z (5 months ago)
- Last Synced: 2024-10-11T12:51:49.025Z (about 1 month ago)
- Topics: calendar, date, date-picker, datepicker, javascript, typescript, vue, vue3, vuejs
- Language: HTML
- Homepage: https://vuejs3-datepicker.netlify.app/
- Size: 1.78 MB
- Stars: 70
- Watchers: 5
- Forks: 41
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue 3 Datepicker
[](https://app.netlify.com/sites/vuejs3-datepicker/deploys)
A datepicker Vue component. Compatible with Vue 3 Only
- [Demo](#demo)
- [Install](#install)
- [Usage](#usage)
- [Date Formatting](#date-formatting)
- [Props](#available-props)
- [Events](#events)
- [Disabled dates](#disabled-dates)
- [Highlighted dates](#highlighted-dates)
To view demo examples locally clone the repo and run `npm install && npm run dev`
## Demo
To view a demo online:
## Install
``` bash
npm install vuejs3-datepicker --save
yarn add vuejs3-datepicker
```
``` javascript
import Datepicker from 'vuejs3-datepicker';
export default {
// ...
components: {
Datepicker
}
// ...
}
```
## Usage
``` html
```
*value* prop if passed should be a Date object
``` html
var state = {
date: new Date(2016, 9, 16)
}
```
Support name attribute for normal html form submission
``` html
```
Using `v-model`
``` html
```
Emits events
``` html
```
Inline always open version
``` html
```
Programatic access of datepicker value
```html
```
```javascript
const { selectedDate } = (inputRef.value as any).value;
```
Icon color, icon height, icon width of calendar
``` html
```
## Available props
| Prop | Type | Default | Description |
|-------------------------------|-----------------|-------------|------------------------------------------|
| modelValue | Date\|String | | Date value of the datepicker via v-model |
| value | Date\|String | | Date value of the datepicker |
| format | String\|Function| dd MMM yyyy | Date formatting string or function |
| full-month-name | Boolean | false | To show the full month name |
| disabled-dates | Object | | See below for configuration |
| placeholder | String | | Input placeholder text |
| inline | Boolean | | To show the datepicker always open |
| calendar-class | String\|Object | | CSS class applied to the calendar el |
| input-class | String\|Object | | CSS class applied to the input el |
| wrapper-class | String\|Object | | CSS class applied to the outer div |
| monday-first | Boolean | false | To start the week on Monday |
| clear-button | Boolean | false | Show an icon for clearing the date |
| clear-button-icon | String | | Use icon for button (ex: fa fa-times) |
| calendar-button | Boolean | false | Show an icon that that can be clicked |
| calendar-button-icon | String | | Use icon for button (ex: fa fa-calendar) |
| calendar-button-icon-content | String | | Use for material-icons (ex: event) |
| day-cell-content | Function | | Use to render custom content in day cell |
| initial-view | String | minimumView | If set, open on that view |
| disabled | Boolean | false | If true, disable Datepicker on screen |
| typeable | Boolean | false | If true, allow the user to type the date |
| use-utc | Boolean | false | use UTC for time calculations |
| open-date | Date\|String | | If set, open on that date |
| minimum-view | String | 'day' | If set, lower-level views won't show |
| maximum-view | String | 'year' | If set, higher-level views won't show |
| preventDisableDateSelection | Boolean | true | will prevent selection of disabled date |
| iconColor | String | black | will change calendar icon color |
| iconWidth | String|Number | 16 | will change calendar icon width |
| iconHeight | String|Number | 16 | will change calendar icon height |
## Events
These events are emitted on actions in the datepicker
| Event | Output | Description |
|-------------------|------------|--------------------------------------|
| opened | | The picker is opened |
| closed | | The picker is closed |
| selected | Date\|null | A date has been selected |
| input | Date\|null | Input value has been modified |
| cleared | | Selected date has been cleared |
| changed-month | Object | Month page has been changed |
| changed-year | Object | Year page has been changed |
| changed-decade | Object | Decade page has been changed |
## Disabled Dates
Dates can be disabled in a number of ways.
``` html
var state = {
disabledDates: {
to: new Date(2016, 0, 5), // Disable all dates up to specific date
from: new Date(2016, 0, 26), // Disable all dates after specific date
dates: [ // Disable an array of dates
new Date(2016, 9, 16),
new Date(2016, 9, 17),
new Date(2016, 9, 18)
],
preventDisableDateSelection: true
}
}
```
## Highlighted Dates
``` html
var state = {
highlighted: {
to: new Date(2016, 0, 5), // Highlight all dates up to specific date
from: new Date(2016, 0, 26), // Highlight all dates after specific date
dates: [ // Highlight an array of dates
new Date(2016, 9, 16),
new Date(2016, 9, 17),
new Date(2016, 9, 18)
]
},
includeDisabled: true // Highlight disabled dates
}
}
```
## Add new Locale
```
new Locale can be added to the following file /src/components/datepicker/locale/index.ts
create a function with new Locale name & export that from data object at the bottom
e.g
const newLocale = (): any => {
const langName = 'Hindi';
const monthFullName = [
'जनवरी',
'फ़रवरी',
'मार्च',
'अप्रैल',
'मई',
'जून',
'जुलाई',
'अगस्त',
'सितंबर',
'अक्टूबर',
'नवंबर',
'दिसंबर',
];
const shortName = ['जन', 'फ़र', 'मार्च', 'अप्रै', 'मई', 'जून', 'जुला', 'अगस्त', 'सितं', 'अक्टू', 'नवं', 'दिसं'];
const days = ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि'];
const daysNames = ['रविवार', 'सोमवार', 'मंगलवार', 'बुधवार', 'गुरुवार', 'शुक्रवार', 'शनिवार'];
const rtl = false;
const ymd = false;
const yearSuffix = '';
return {
months: monthFullName,
monthsAbbr: shortName,
days,
language: langName,
yearSuffix,
ymd,
rtl,
langName,
daysNames,
};
};
export const data = {
af: af(),
hi: hi(),
de: de(),
en: en(),
fr: fr(),
nl: nl()
...
newLocale: newLocale()
};
```
Contributors:
* [Shubhadip Maity](https://github.com/shubhadip)
* [Vivek Singh](https://github.com/viveksinghup)