Examples

value / modelValue

Single - Default

<template>
  <Datepicker v-model="new Date()"/>
</template>

range

Range - Default

<template>
  <Datepicker
    range
    v-model="selectedDate"
  />
</template>

<script>
export default {
  data () {
    return {
      selectedDate: [
        new Date(),
        new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000)]
    }
  }
}
</script>

lang

Change Datepicker Language

<template>
  <Datepicker v-model="new Date()" lang="en"/>
</template>

firstDayOfWeek

Change First Day Of Week (Default: 'Monday')

<template>
  <Datepicker v-model="new Date()" first-day-of-week="sunday"/>
</template>

inputClass

Added Custom Input Class

<template>
  <Datepicker v-model="new Date()" input-class="customInputClass"/>
</template>

position

Change Picker Position (Default: 'left')

Left

<template>
  <Datepicker v-model="new Date()" position="left"/>
</template>

Right

<template>
  <Datepicker v-model="new Date()" position="right"/>
</template>

Center

<template>
  <Datepicker v-model="new Date()" position="center"/>
</template>

Top

<template>
  <Datepicker v-model="new Date()" position="top"/>
</template>

disabledStartDate

Make disabled single date: to -> before this date from -> after this date

<template>
  <Datepicker v-model="selectedDate" disabled-start-date="disabledStartDate"/>
</template>

<script>
export default {
  data () {
    return {
      selectedDate: new Date(new Date().getTime() - 5 * 24 * 60 * 60 * 1000),
      disabledStartDate: {
        to: new Date('08.02.2021'),
        from: new Date('10.02.2021')
      }
    }
  }
}
</script>

disabledEndDate

Make disabled end date: to -> before this date from -> after this date

<template>
  <Datepicker
    v-model="selectedDate"
    disabled-end-date="disabledEndDate"
    range/>
</template>

<script>
export default {
  data () {
    return {
      selectedDate: [
        new Date(),
        new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000)
      ],
      disabledEndDate: {
        to: new Date('08.02.2021'),
        from: new Date('10.02.2021')
      }
    }
  }
}
</script>

textFormat

Change Text Format (Short Or Long?)

<template>
  <Datepicker v-model="new Date()" text-format="long"/>
</template>

dateFormat

Change Date Format

<template>
  <Datepicker
    v-model="new Date()"
    date-format="{
      day: '2-digit',
      month: '2-digit',
      year: 'numeric' }"
  />
</template>

disabled

Disable Calendar

<template>
  <Datepicker disabled/>
</template>

placeholder

Change Placeholder
Default: Select Date

<template>
  <Datepicker placeholder="Change Date"/>
</template>

circle

Circle Selected Date

<template>
  <Datepicker
    circle
    v-model="new Date()"/>
</template>

showClearButton

selected date clear

<template>
  <Datepicker
    show-clear-button
    v-model="new Date()"/>
</template>

showPickerInital

picker show on mount

<template>
  <Datepicker
    show-picker-inital
    v-model="new Date()"/>
</template>