Datepicker

A light weight vue datepicker plugin.

GitHub

Demo

Date

v-model:

Range Date

v-model:

Time

v-model:

Custom Format Date

v-model:

Lang Support

v-model:

Compact

v-model:

Shortcuts

v-model:

Install

npm i @vuesimple/vs-datepicker

Usage

<template>
  <vs-datepicker
    label="Date"
    id="deliveryDate"
    v-model="form.date"
    placeholder="DD-MM-YYYY"
    format="DD-MM-YYYY"
  ></vs-datepicker>
</template>

<script>
  import VsDatepicker from '@vuesimple/vs-datepicker';

  export default {
    components: {
      VsDatepicker,
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-datepicker@<version>/dist/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

// Main/Entry file
app.use(VsDatepicker.plugin);

<template>
  <vs-datepicker
    label="Date"
    id="deliveryDate"
    v-model="form.date"
    placeholder="DD-MM-YYYY"
    format="DD-MM-YYYY"
  ></vs-datepicker>
</template>

Nuxt.js

After installation,

• Create a file /plugins/vs-datepicker.js

  import Vue from 'vue';
  import VsDatepicker from '@vuesimple/vs-datepicker';
  
  Vue.component('vs-datepicker', VsDatepicker);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-datepicker', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  <template>
    <vs-datepicker
      label="Date"
      id="deliveryDate"
      v-model="form.date"
      placeholder="DD-MM-YYYY"
      format="DD-MM-YYYY"
    ></vs-datepicker>
  </template>

Note

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsDatepicker from '@vuesimple/vs-datepicker' & add in component:{VsDatepicker} and use it within component, without globally installing in plugin folder.

Props

Name	Type	Default	Description
type	date,datetime,year,month,time,week	date	Select the type of picker
format	Token	MM-DD-YYYY	To set the date format. similar to moment.js
value-type	Value-Type	'date'	Data type of the binding value/v-model.
range	Boolean	false	If true, pick the range date
label	String	Date	Label to datepicker
isError	Boolean	-	Highlight input box with red if error
required	Boolean	-	show * with label
disabled	Boolean	-	Disable datepicker
disabled-date	Function	-	Disable dates in datepicker
id	String	-	Id added to datepicker component
placeholder	String	-	Placeholder to datepicker input box
lang	Object	-	Override the default locale
editable	Boolean	false	Whether the input is editable
clearable	Boolean	false	If false, don't show the clear icon
is-compact	Boolean	false	Applies compact style to datepicker

NOTE Example for maxdate

<vs-datepicker
  label="Date"
  id="deliveryDate"
  v-model="form.date"
  placeholder="DD-MM-YYYY"
  format="DD-MM-YYYY"
  :disabled-date="disabledDate"
></vs-datepicker>

<script>
  export default {
    methods: {
      disabledDates(date) {
        return date < new Date('Your Min Date') || date > new Date('Your Max Date');
      },
    },
  };
</script>

Events

Name	Description
v-model	When the value changes
change	When the value change(same as v-model)
open	When panel opening
close	When panel closing

Token

Unit	Token	Output
Year	YY	70 71 ... 10 11
	YYYY	1970 1971 ... 2010 2011
	Y	-1000 ...20 ... 1970 ... 9999 +10000
Month	M	1 2 ... 11 12
	MM	01 02 ... 11 12
	MMM	Jan Feb ... Nov Dec
	MMMM	January February ... November December
Day of Month	D	1 2 ... 30 31
	DD	01 02 ... 30 31
Day of Week	d	0 1 ... 5 6
	dd	Su Mo ... Fr Sa
	ddd	Sun Mon ... Fri Sat
	dddd	Sunday Monday ... Friday Saturday
AM/PM	A	AM PM
	a	am pm
Hour	H	0 1 ... 22 23
	HH	00 01 ... 22 23
	h	1 2 ... 12
	hh	01 02 ... 12
Minute	m	0 1 ... 58 59
	mm	00 01 ... 58 59
Second	s	0 1 ... 58 59
	ss	00 01 ... 58 59
Fractional Second	S	0 1 ... 8 9
	SS	00 01 ... 98 99
	SSS	000 001 ... 998 999
Time Zone	Z	-07:00 -06:00 ... +06:00 +07:00
	ZZ	-0700 -0600 ... +0600 +0700
Week of Year	w	1 2 ... 52 53
	ww	01 02 ... 52 53
Unix Timestamp	X	1360013296
Unix Millisecond Timestamp	x	1360013296123

Value Type

Value	Description
'date'	Returns a Date object
'timestamp'	Returns a timestamp number
'format'	Returns a string formatted using pattern of format
token(MM/DD/YYYY)	Returns a string formatted using this pattern

Full lang config

{
  // the locale of formatting and parsing function
  formatLocale: {
    // MMMM
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    // MMM
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    // dddd
    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    // ddd
    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    // dd
    weekdaysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    // first day of week
    firstDayOfWeek: 0,
    // first week contains January 1st.
    firstWeekContainsDate: 1,
  },
}

Original credits to Vue2 Datepicker