@mathieustan/vue-datepicker

vue-datepicker

A datepicker Vue component. Compatible with Vue 2.x

• Demo
• Install
• Usage
• Props
• Events
• Date Formatting
• Translations
• Best Practices

Demo

To view a demo online: https://vue-datepicker.netlify.com/

Install

npm install @mathieustan/vue-datepicker --save

or

yarn add @mathieustan/vue-datepicker

import { VueDatePicker } from '@mathieustan/vue-datepicker';
import '@mathieustan/vue-datepicker/dist/vue-datepicker.min.css';

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

or

import VueDatePicker from '@mathieustan/vue-datepicker';
import '@mathieustan/vue-datepicker/dist/vue-datepicker.min.css';

Vue.use(VueDatePicker);

Usage

<VueDatePicker v-model="currentDate" />

value prop if passed should be a Date object

<template>
    <VueDatePicker :value="date"></VueDatePicker>
</template>

<script>
export default {
  // ...
  components: {
    VueDatePicker
  },
  data: () => ({
      date: new Date([2019, 5, 16]),
  }),,
  // ...
}
</script>

support name attribute for normal html form submission

<VueDatePicker :value="state.date" name="uniquename"></VueDatePicker>

Using v-model

<VueDatePicker v-model="state.date" name="uniquename"></VueDatePicker>

Available props

Prop	Type	Default	Description
id	String	'datepicker'	Sets the input id
value	Date|String|Number		Date picker model (ISO 8601 format, YY-mm-dd or YY-mm)
name	String	'datepicker'	Input name property & datepicker title in fullscreenMobile
clearable	Boolean	false	Add input clear functionality
validate	Boolean	false	Shows validations button to select date
buttonValidate	String	'Ok'	Sets validate text button
buttonCancel	String	'Cancel'	Sets cancel text button
format	String	DD MMMM YYYY	Allows you to customize input date format
formatHeader	String	dddd DD MMM	Allows you to customize header date format
placeholder	String	'YYYY-MM-DD'	Sets the input’s placeholder text
visible	Boolean	false	Allows you to trigger datepicker visibility
disabled	Boolean	false	Sets datepicker disabled
color	String	#4f88ff	Allows you to customize color
contentClass	String	''	Applies custom class to datepicker content
noHeader	Boolean		Hides datepicker header
noInput	Boolean		Hides datepickler input. It'll show a button instead
noCalendarIcon	Boolean		Hides datepicker icon
fullscreenMobile	Boolean	false	Shows datepicker in a bottom sheet when in mobile view
allowedDates	Function		Function which validate allowed date (allowedDates: (date) => .... // date is a javascript date)
minDate	String|Number|Date		Dates are availables after this date
maxDate	String|Number|Date		Dates are disabled after this date
visibleYearsNumber	Number	10	Allows to set years range in year picker (it will add X years before & after current year)
locale	Object	{lang: 'en'}	Allows to change language. More informations here Translations
inline	Boolean	false	Shows an inline datepicker
attach	String|DOM Element	false	Specifies which DOM element that this component should detach to.String can be any valid querySelector and Object can be any valid Node. This will attach to the root body component by default. Best Practices
type	String	'date'	Determines the type of the picker - date/month/quarter
range	Boolean	false	Sets range mode active (currently, only available for date)
rangeInputText	String	'%d ~ %d'	Sets input text format
rangeHeaderText	String	'From %d To %d '	Sets header text format
rangePresets	Array		Allows to add custom range presets to range datepicker. (Max custom presets = 6) Example: [{ name: 'This year', dates: { start: ..., end: ... } }]
tabindex	String|Number	'0'	Specify input tabindex
origin	String		Allows to set origin (otherwise, it will be generated from position)
rtl	Boolean	false	Allow to use datepicker with rtl mode
zIndex	Number		Specify a z-index to datepicker & overlay

Events

Event	Output	Description
onOpen		datepicker opened
onClose		datepicker closed
onChange		datepicker changed
onDestroy		datepicker destroyed

Date Formatting

You can use this with format props.

Example :

<VueDatePicker v-model="currentDate" format="YYYY-MM-DD" />

Format	Output	Description
YY	18	Two-digit year
YYYY	2018	Four-digit year
M	1-12	Month, beginning at 1
MM	01-12	Month, 2-digits
MMM	Jan-Dec	The abbreviated month name
MMMM	January-December	The full month name
D	1-31	Day of month
DD	01-31	Day of month, 2-digits
H	0-23	Hours
HH	00-23	Hours, 2-digits
h	1-12	Hours, 12-hour clock
hh	01-12	Hours, 12-hour clock, 2-digits
m	0-59	Minutes
mm	00-59	Minutes, 2-digits
s	0-59	Seconds
ss	00-59	Seconds, 2-digits
S	0-9	Hundreds of milliseconds, 1-digit
SS	00-99	Tens of milliseconds, 2-digits
SSS	000-999	Milliseconds, 3-digits
Z	-5:00	Offset from UTC
ZZ	-0500	Compact offset from UTC, 2-digits
A	AM PM	Post or ante meridiem, upper-case
a	am pm	Post or ante meridiem, lower-case
Do	1st... 31st	Day of Month with ordinal

Translations

By default, locale will be set from your navigator language. But it's possible to set it from locale props. Actually, there are some locale inside project ('en', 'fr, 'es', 'de');

exemple:

<template>
    <VueDatePicker :value="date" :locale="locale"></VueDatePicker>
</template>

<script>
export default {
  // ...
  components: {
    VueDatePicker
  },
  data: () => ({
      date: new Date([2019, 5, 16]),
      locale: {
        lang: 'fr' // or 'en', 'es', 'de',
        weekDays: ['L', 'M', 'M', 'J', 'V', 'S', 'D'], // you can surcharge weekDays too
      },
  }),,
  // ...
}
</script>

:rocket: Now, you can use your own language object

Below, an exemple for it language : You should have those properties to make it works :

'name', 'weekdays', 'weekdaysShort', 'weekdaysMin', 'weekStart', 'months', 'monthsShort', 'ordinal', 'formats', 'buttonCancel', 'buttonValidate', 'rangeHeaderText'

<template>
    <VueDatePicker :value="date" :locale="locale"></VueDatePicker>
</template>

<script>
const locale = {
  lang: {
    name: 'it',
    weekdays: 'domenica_lunedì_martedì_mercoledì_giovedì_venerdì_sabato'.split('_'),
    weekdaysShort: 'dom_lun_mar_mer_gio_ven_sab'.split('_'),
    weekStart: 1,
    months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'),
    monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),
    formats: {
      LT: 'HH:mm',
      LTS: 'HH:mm:ss',
      L: 'DD/MM/YYYY',
      LL: 'D MMMM YYYY',
      LLL: 'D MMMM YYYY HH:mm',
      LLLL: 'dddd D MMMM YYYY HH:mm',
    },
    ordinal: n => `${n}º`,
    buttonCancel: 'Annulla',
    buttonValidate: 'Ok',
    rangeHeaderText: 'Dalle %d Alle 13',
  },
};

export default {
  // ...
  components: {
    VueDatePicker
  },
  data: () => ({
    date: new Date([2019, 5, 16]),
    locale,
  }),
  // ...
};
</script>

If you need more exemples, you can go to this link to find your language : -> locales

Best Practices

When should you use attach prop :

Attach

is great when you have a fixed element in your page like a panel, a dialog or a fixed fullscreen container. The datepicker position will not take care of scroll page position and it'll be absolutely positioned into your fixed container. (if you scroll, datepicker popup will scroll too).