Awesome

⚠️ No longer maintained. Sorry everyone, as you see I couldn't maintain this project properly. Feel free to use it/copy it to improve this 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

Events

Date Formatting

You can use this with format props.

Example :

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

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).