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