@pderas/vue2-date-selector
Version:
A vue 2 component for selecting dates
90 lines (70 loc) • 4.75 kB
Markdown
# Vue Date Selector
A collection of vue 2 components for selecting a date. `<date-selector>` provides 3 input boxes for an easy way to select the day, month, and year. `<calendar-picker>` displays a calendar to select an individual date, or a start and end date.
## How to initialize Vue Date Selector
Vue date selector is built as a vue plugin. It can be initialized just as the Vue documentation states.
```javascript
import DateSelector from "@pderas/vue2-date-selector";
// this provides access to both <date-selector /> and <calendar-picker /> components globally
Vue.use(DateSelector);
```
## Usage
#### `<date-selector />` Creation
Vue date selector is easily created, and has many properties that can be changed.
```HTML
<date-selector></date-selector>
```
## `<date-selector />` Properties
| Property | Required | Type | Default | Description |
|---------------|:--------:|------------------|----------------------------|-------------------------------------------------------------------------|
| value | false | String|Date | Date() | Value for the input, can be used with v-model |
| formatFn | false | Function | (value) => {return value } | Formats the labels based on the function provided |
| amountOfYears | false | Number | 20 | The amount of years to show in the date selector, from the current year |
| amountOfYearsAfter | false | Number | 0 | The amount of years to show in the date selector, from after the current year |
| disabled | false | Object | null | Specifies dates to disable from being selected in the picker |
| disabledInput | false | Boolean | false | Disables the inputs on the date selector |
### Disabled Dates
The disabled object contains two potential keys for disabling ranges of dates.
* `to` This is used for disabling dates up to a specific date.
* `from` This is used for disabled dates after a specific date.
Currently only `to` or `from` can be used separately. They cannot be used together. The value can be either a valid date string or a date object.
#### Styling
Styling is currently limited, but can be expanded in the future.
#### `<calendar-picker />` Creation
Vue calendar picker is easily created, and has many properties that can be changed.
```HTML
<calendar-picker v-model='dates' />
```
### `<calendar-picker />` Properties
| Property | Required | Type | Default | Description |
|--|--|--|--|--|
| value | true | Object | -- | passed in the form of either `{ day: null }` for single date picking, or `{ start: null, end: null }` for multi day picking |
| month | false | Number | `new Date().getMonth() + 1` | _**ones based**_ month to be displayed (Jan = 1, Dec = 12) |
| year | false | Number | `new Date().getFullYear()` | year to be displayed |
| multiDaySelect | false | Boolean | True | Allow either single, or multi day selection |
| next | false | String | `Next` | string to be displayed for next month button |
| prev | false | String | `Prev` | string to be displayed for previous month button |
| highlighted | false | Object | `{}` | days that should be highlighted on load. can include tooltip information to be displayed on hover. should be passed in the format `{ [dd-MM-yyyy]: { name: 'My Tooltip Info' }}`. for example:
```js
{
"28-09-2018": {
name: "last friday in september"
},
"01-10-2018": {
name: "first monday in october"
}
}
```
### Misc
Instead of providing a `value` prop, `v-model` can be used to make use of two way data binding. Similarly, the `month` and `year` props can be bound using the `.sync` modifier.
```html
<!-- sync example -->
<calendar-picker
v-model='selectedDates'
:month.sync='month'
:year.sync='year' />
```
### Styling
All elements are namespaced starting with `.cal` and are written at the root level for the easiest customization. The calendar will grow/shrink width in relation to the surrounding div, and the squares height can be easily overwritten using `.cal-day { height: 50px; }`. The most common styles to be overridden are likely to be the background colors of: `.cal-header, .cal-inactive, .cal-today, .cal-highlighted, .cal-clicked, .cal-faded`.
## License
This project is covered under the MIT License. Feel free to use it wherever you like.