Vue2-datetimepicker NPM

Vue 2 Date Time Picker

Works great with Semantic UI.

Warning: no time picker coded, yet!

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.

List of components available

An HTML Input with an pop-up containing Calendar

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

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

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

A container for Calendar

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

No slots for this component

A calendar view

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

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

No slots for this component

7 years ago

7 years ago