Vue 2 Date Time Picker

Works great with Semantic UI.

Warning: no time picker coded, yet!

Semantic UI CSS

Import src/calendar.less to render a Calendar with a Semantic UI ish look.

With webpack, on a single file component, put @import '~vue2-datetimepicker/src/calendar.less' on your style tag.

Components

List of components available

DatePicker

An HTML Input with an pop-up containing Calendar

Attributes

Type	Attribute	Default	Description
String	enter-active-class	animate transition scale in	PopUp animating classes. See https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes
String	format	Localized format for L token (based on locale attribute)	Locale friendly date format
String	format-value	YYYY-MM-DD	Backend friendly format according to HTML standard
String	leave-active-class	animate transition scale out	PopUp animating classes. See https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes
String	locale	User's current preferred language	A string representing the language version as defined in BCP 47.
moment, Date, String	max	undefined	Maximum date allowed (inclusive)
moment, Date, String	min	undefined	Minimum date allowed (inclusive)
moment, Date, String	popup-class	visible ui custom bottom right popup for datepicker	Classes to apply to PopUp component
moment, Date, String	v-model	undefined	Vue's two-way binding
moment, Date, String	value	undefined	Default date

Events

• blur – HTML Input's event
• change – HTML Input's event
• click – HTML Input's event
• contextmenu – HTML Input's event
• focus – HTML Input's event
• input – HTML Input's event
• invalid – HTML Input's event
• keydown – HTML Input's event
• keypress – HTML Input's event
• keyup – HTML Input's event
• mousedown – HTML Input's event
• mouseenter – HTML Input's event
• mouseleave – HTML Input's event
• mouseout – HTML Input's event
• mouseover – HTML Input's event
• mouseup – HTML Input's event
• pointerlockchange – HTML Input's event
• pointerlockerror – HTML Input's event
• reset – HTML Input's event
• search – HTML Input's event
• select – HTML Input's event
• select – HTML Input's event
• submit – HTML Input's event
• wheel – HTML Input's event

Methods

• emitFocus – Called when input has received focus
• hide – Hides PopUp
• hideBlurred – Called when user clicks outside PopUp
• setDate – Emits input event preserving original type of the value attribute
• show – Shows PopUp
• toggle – Toggles PopUp visibility

Slots

• hidden-input – HTML Hidden Input with the date formatted based on the format-value attribute
• input – HTML Text Input with the date formatted based on the format attribute
• popup – PopUp to be shown when the input receives focus

PopUp

A container for Calendar

Attributes

Type	Attribute	Default	Description
String	locale	User's current preferred language	A string representing the language version as defined in BCP 47.
moment, Date, String	max	undefined	Maximum date allowed (inclusive)
moment, Date, String	min	undefined	Minimum date allowed (inclusive)
moment, Date, String	v-model	undefined	Vue's two-way binding
moment, Date, String	value	undefined	Default date

Methods

• setDate – Emits input event

Slots

No slots for this component

Events

• input – value has changed

Calendar

A calendar view

Attributes

Type	Attribute	Default	Description
String	locale	User's current preferred language	A string representing the language version as defined in BCP 47.
moment, Date, String	max	undefined	Maximum date allowed (inclusive)
moment, Date, String	min	undefined	Minimum date allowed (inclusive)
Boolean	readonly	Wether v-model or value is defined	The calendar is read only. No changes will affect v-model or value.
moment, Date, String	v-model	undefined	Vue's two-way binding
moment, Date, String	value	undefined	Default date

Events

• input – value has changed

Methods

• addMonth – Shows next month if date is before max attribute
• isBetween(moment) – Whether a moment instance is between min an max attributes, inclusive
• isMax – Is max attribute a valid Date or moment instance?
• isMin – Is min attribute a valid Date or moment instance?
• isToday(moment) – Whether a moment instance is today
• rotate(WheelEvent) – Called when mouse's wheel is used on month name
• setDate – Emits input event preserving original type of the value attribute. Checks if the selected date is between min an max attributes, inclusive.
• setLocale(String) – Changes locale of the calendar
• subMonth – Shows previous month if date is after min attribute

Slots

No slots for this component