Vue Customizable Datepicker

Try it out here: Vue Customizable Datepicker

🚀 Usage

npm i vue-customizable-datepicker

Nuxt.js usage

Create plugin (datepicker.js)

import Vue from 'vue'
import DatePicker from 'vue-customizable-datepicker'

Vue.component('DatePicker', DatePicker);

// nuxt.config.js
plugins: [
  {src: '@/plugins/datepicker', ssr: false}
],

// remember to add ssr: false

Slots

Day

<template v-slot:day="{day}">
  <span>{{ day }}</span>
</template>

Value

<template v-slot:value="{date}">
  <span>{{ date }}</span>
</template>

// If range prop is set to true
<template v-slot:value="{from, to}">
  <span>{{ from }}</span>
  <span>{{ to }}</span>
</template>

Header

<template v-slot:header="{month, year}">
  <span>{{ month }}</span>
  <span>{{ year }}</span>
</template>

Other slots

• arrow-month-next
• arrow-month-previous
• arrow-year-next
• arrow-year-previous

Events

| Event | Data | | ------ | ------ | | year-change | {year: Number, month: Number} | | month-change | {year: Number, month: Number} |

Props

| Prop | Default | Description | | ------ | ------ | ------ | | arrows | true | ------ | | closeOnClick | true | ------ | | dayNames | {1: "Mo",2: "Tu",3: "We",4: "Th",5: "Fr",6: "Sa", 0: "Su"} | ------ | | disabledDates | [] | ------ | | disableBefore | Date | ------ | | disableAfter | Date | ------ | | exactRangeDates | false | Return array of days | | fillEmpty | true | ------ | | fillRange | true | ------ | | firstDay | 1 | ------ | | format | true | %d.%m.%Y | | numberOfCalendars | 1 | ------ | | opened | false | Always opened | | placeholder | Pick a date | ------ | | range | false | Range picker | | zeroPad | true | Zero pad all except days | | zeroPadDays | false | Zero pad days |

disabledDates

<DatePicker :disabled-dates="disabledDates" v-model="selectedDate">

selectedDate: new Date(),
disabledDates: [
  // To disable range of dates
  [new Date('7/12/2020'), new Date('7/18/2020')],
  
  // To disable single date
  new Date('9/8/2020'),
  
  // example:
  // Disable range from 7/24/2020 to 7/27/2020 + diasble 7/29/2020
  [new Date('7/24/2020'), new Date('7/27/2020')], new Date('7/29/2020')
]

v-model

If range prop is set to true value will be object with from and to properties.

{
  from: 'Fri Jul 10 2020 00:00:00 GMT+0200 (Central Eu...'
  to: 'Wed Jul 15 2020 00:00:00 GMT+0200 (Central Eu...'
}

If range and exactRangeDates props are set to true value will be array of dates.

[
  'Thu Jul 09 2020 00:00:00 GMT+0200 (Central Eu...',
  'Fri Jul 10 2020 00:00:00 GMT+0200 (Central Eu...',
  'Sat Jul 11 2020 00:00:00 GMT+0200 (Central Eu...'
]

Otherwise value will be Date object.

"2020-07-08T22:00:00.000Z"

Buy me a coffee