Vue Date Selector

A collection of vue 2 components for selecting a date. provides 3 input boxes for an easy way to select the day, month, and year. 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 and components globally
Vue.use(DateSelector);
`


Usage

#### Creation
Vue date selector is easily created, and has many properties that can be changed.

`HTML


`

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 |

$3

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.

#### Creation
Vue calendar picker is easily created, and has many properties that can be changed.

`HTML

`

$3


| 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"
}
}
`

$3

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

v-model='selectedDates'
:month.sync='month'
:year.sync='year' />
`

$3

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`.

!calendar-picker component

License

This project is covered under the MIT License. Feel free to use it wherever you like.