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.