Skip to content

zangab/vue-datepicker

 
 

Repository files navigation

⚠️ 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

Codacy Badge Codacy Badge

A datepicker Vue component. Compatible with Vue 2.x

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 datepicker 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>

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

About

A clean datepicker made with VueJs

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 76.9%
  • SCSS 13.0%
  • Vue 9.9%
  • HTML 0.2%