Demo

Demo

Screenshot

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