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.

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.

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

<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:

{
    "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.

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