Vue Datepicker UI

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

← Custom Style →