A vue 2 component for selecting dates
npm install @pderas/vue2-date-selector 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.``javascript
import DateSelector from "@pderas/vue2-date-selector";
// this provides access to both
Vue.use(DateSelector);
`Usage
#### Creation
Vue date selector is easily created, and has many properties that can be changed.
`HTML
`
Properties* 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`
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`.