lb-vue-datetimepicker

lb-vue-datetimepicker

Demo

Demo

Screenshot

Datetime Picker distinguishes two display modes: regular and simple.

Simple mode displays Datetime Picker select box below date input control:

## Description

Vue2.js date time picker using moment.js as a date management library

Install

npm install lb-vue-datetimepicker --save

Include plugin in your main.js file.

import Vue from 'vue'
import lbVueDateTimePicker from 'lb-vue-datetimepicker';
Vue.component('lb-vue-datetimepicker', lbVueDateTimePicker);

Usage

Minimum required data

<template>
    <datetimepicker v-model="date"></datetimepicker>
</template>

With all available options

'inputClass', 'translateMethod', 'type', 'format', 'display-format', 'isUTC', 'isClearable'

<template>
    <datetimepicker v-model="date" input-class="form-control" translate-method="translateKeys" type="datetime" format="YYYY-MM-DD HH:mm:ss" display-format="DD.MM.YYYY." :isUTC="true" :isClearable="true"></datetimepicker>
</template>

Simple mode

'simple'

<template>
    <datetimepicker v-model="date" input-class="form-control" translate-method="translateKeys" type="datetime" format="YYYY-MM-DD HH:mm:ss" display-format="DD.MM.YYYY." :simple="true" :isUTC="true"></datetimepicker>
</template>

Start end date with two pickers

'start', 'end'

<template>
    <datetimepicker v-model="startDate" :end="endDate" input-class="form-control" translate-method="translateKeys" type="datetime" format="YYYY-MM-DD HH:mm:ss" display-format="DD.MM.YYYY." :simple="true" :isUTC="true"></datetimepicker>
    <datetimepicker v-model="endDate" :start="startDate" input-class="form-control" translate-method="translateKeys" type="datetime" format="YYYY-MM-DD HH:mm:ss" display-format="DD.MM.YYYY." :simple="true" :isUTC="true"></datetimepicker>
</template>

Available props

Property	Type	Required	Description
value (v-model)	string or date/moment object	*	date value
input-class	string		Input field class
translate-method	function		If you want to translate the months and buttons this function will be called with translation key
type	string		type of picker, can be: date, datetime, time
format	string		Moment format of the date that will be actual value, if not available it will use moment object
display-format	string		Moment format of the date to display to user
simple	boolean		If simple mode is true, it will show as a select box below input and you can change date in input
min-year	string		Minimum year for selection (defaults to 1900)
max-year	string		Maximum year for selection (defaults to 2100)
isUTC	boolean		If isUTC property is set true, selected local datetimes are converted to UTC.
start	string or date/moment object		start date value to limit selection or to use it on end date picker
end	string or date/moment object		end date value to limit selection or to use it on start date picker
isClearable	boolean		cleareable datetime picker input
disabled	boolean		disabled datetime picker input