A datepicker Vue component Compatible with Vue 2

Datepicker

A datepicker Vue component. Compatible with Vue 2.x. Works nice on mobile devices.

Install

• Copy TouchDatePicker.vue component into your project
• Install moment: npm install moment@^2.24.0 --save

If you want to use vee-validate in your project:

• Install vee-validate: npm install vee-validate@^2.0.6 --save

then add this code into you main file:

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate);

If you don't want to use vee-validate in your project:

• Remove v-validate="vValidate" from TouchDatePicker.vue file

Usage

import Datepicker from './TouchDatePicker.vue';

export default {
  // ...
  components: {
    Datepicker
  }
  // ...
}

<datepicker id="dob"></datepicker>

Using v-model

<datepicker id="dob" v-model="state.date" name="uniquename"></datepicker>

Emits events

<datepicker id="dob" v-on:change="saveModification"></datepicker>

Full example

<datepicker v-bind:language="en" v-bind:placeholder="Date of birth" v-bind:input-class="{'datepicker-input-reg': true, 'is-invalid-input': errors.has('event_date')}" v-bind:min="2000-01-01"  v-bind:max="2010-12-31" 
v-bind:data-vv-as="Please enter your birthdate" v-model="event_date" v-bind:v-validate="{required: true, date_format: 'YYYY-MM-DD'}" name="event_date" id="event_date" @change="saveChanges"></datepicker>
<span class="form-error" :class="{'is-visible': errors.has('event_date')}">{{ errors.first('event_date') }}</span>

Available props

Prop	Type	Default	Description
value	Date|String		Date value of the datepicker
name	String		Input name property
id	String		Input id
format-date	String	DD MMMM YYYY	Date formatting string
language	String	en	Translation language used by moment
v-validate	Object		Validation rules used by vee-validate
input-class	String|Object		CSS class applied to the input el
placeholder	String		Input placeholder text
data-vv-as	String		See vee-validate: Errors localization
max	String		Max calendar date
min	String		Min calendar date

Events

You can emit any js event as you would do on a DOM input

GitHub