vue-datepicker

About

A responsive date picker for Vue.js, made with love, with nice transition and clean design.

Install

1. Install component with npm

2. Load component in your project

3. Use the component

Api

name	description	type	default
allowed-dates	Restricts which dates can be selected	`function`	null
allow-overflow	Allows the menu to overflow off the screen	`boolean`	true
attach	Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. will attach to the root body by default.	`any`	false
button-cancel	Sets cancel text button	`string`	undefined
button-validate	Sets validate text button	`string`	undefined
clearable	Allows to clear date	`boolean`	false
color	Allows you to customize color	`string`	'#4f88ff'
content-class	Applies a custom class to the detached element. This is useful because the content is moved to the beginning of body (unless the attach prop is provided) and is not targetable by classes passed directly on the component.	`string`	undefined
disabled	Sets datepicker disabled	`boolean`	false
format	Allows you to customize input date format	`string`	undefined
format-header	Allows you to customize header date format	`string`	undefined
fullscreen-mobile	Shows datepicker in a bottom sheet when in mobile view	`boolean`	false
id	Sets the input id	`string`	undefined
inline	Shows an inline datepicker	`boolean`	false
locale	Allows to change language	`object`	{}
max-date	Dates are disabled after this date	`[ "string", "number", "date" ]`	undefined
min-date	Dates are availables after this date	`[ "string", "number", "date" ]`	undefined
mobile-breakpoint	Used to set when to toggle between normal datepicker & fullscreen datepicker. Used with fullscreenMobile prop	`[ "number", "string" ]`	576
name	Sets input name property & datepicker title in fullscreenMobile	`string`	'datepicker'
no-calendar-icon	Hides datepicker icon	`boolean`	false
no-header	Hides datepicker header	`boolean`	false
origin	Allows to set origin	`string`	undefined
placeholder	Sets the input’s placeholder text	`string`	'YYYY-MM-DD'
range	Sets range mode active (currently, only available for date)	`boolean`	false
range-header-text	Sets header text format	`string`	undefined
range-input-text	Sets input text format	`string`	'%d ~ %d'
range-presets	Allows to add custom range presets to range datepicker. (Max custom presets = 6) Example: [{ name: 'This year', dates: { start: ..., end: ... } }]	`array`	undefined
rtl	Sets RTL direction	`boolean`	false
tabindex	Sets input tabindex	`[ "string", "number" ]`	0
type	Determines the type of the picker - date/month/quarter	`string`	'date'
validate	Shows validation buttons to select date	`boolean`	false
value	Date picker model (ISO 8601 format, YY-mm-dd or YY-mm)	`[ "string", "object", "number", "date" ]`	undefined
visible	Allows you to trigger datepicker visibility	`boolean`	false
visible-years-number	Sets years range in year selection panel (it'll see X years before and after current year)	`number`	10
z-index	Sets datepicker index	`number`	1002

Examples (props)

# Default

Default usage without any props

# Props: AllowedDates

Function which validate allowed date

# Props: Validate

Need to validate to change date (Add buttons)

# Props: Clearable

Adds input clear functionality

# Props: Format

Allow to format input date

# Props: FormatHeader

Allow to format header date

# Props: Placeholder

Allow to set placeholder for input

# Props: Visible

Used to trigger datepicker visibility

# Props: Disabled

Set datepicker disabled

# Props: Color

Allow to set datepicker color

# Props: NoHeader

Boolean to hide datepicker header

# Props: NoCalendarIcon

Hide to hide calendar icon

# Props: FullscreenMobile

Datepicker will appear in a bottom sheet when screen width is less than 480px

# Props: MinDate & MaxDate

Specify min & max date for datepicker

# Props: visibleYearsNumber

Allows to set years range in year picker (it will add X years before & after current year)

# Props: Locale

Allows to set lang & custom WeekDays ({ lang: 'fr', weekDays: ['L', 'M', 'M', 'J', 'V', 'S', 'D'] })

# Props: Locale (Selectable lang)

Translations. Important, you should always pass a property lang in locale property. :locale="{ lang: selectedLang }"

# Props: Inline

Allow you to show datepicker inline (without input)

# Props: Type (Month)

Month datepicker

# Props: Type (Quarter)

Quarter datepicker

# Props: Type (Year)

Year datepicker

# Props: Range

Enable/disable Date range (actually only available for date)

# Props: Range (with presets)

Allow to add custom range presets to range datepicker. (Max custom presets = 6)

# Props: Range with RTL mode

Using range picker in RTL mode

# Custom day slot

Allows to change day appaearance, but you can also use tooltip or anything else if needed. Try to keep cursor on a day

# Custom input-icon slot

Allows to change icon appaearance

Birthday picker

Starting with year picker by default, restricting dates range and closing the picker menu after selecting the day make the perfect birthday picker.

# Events

Events available

# Custom activator

Possible to use a custom activator slot to trigger datepicker

Vue DatePicker