Vue 3 Datepicker

Appearance

On this page

Examples ​

Styling ​

For styling examples, see Configuration section.

Basic usage ​

Code for this example
vue
<script setup>
import Datepicker from '../src/datepicker/Datepicker.vue'
import { ref } from 'vue'
const picked = ref(new Date())

</script>

<template>
  <Datepicker v-model="picked" />
</template>

Typeable input ​

Code for this example
vue
<script setup>
import Datepicker from '../src/datepicker/Datepicker.vue'
import { ref } from 'vue'
const picked = ref(new Date())

</script>

<template>
  <Datepicker v-model="typeable" typeable />
</template>

Upper and lower limits ​

TIP

If limit is within the current "view" (e.g. a month), then view changing will be prohibited.

Settings:

  • Lower limit:
  • Upper limit:

Result:

Code for this example
vue
<script setup>
import Datepicker from '../src/datepicker/Datepicker.vue'
import { ref } from 'vue'
const example2 = ref(new Date())
const example2_from = ref(new Date())
const example2_to = ref(new Date())

</script>

<template>
  <Datepicker
    v-model="example2"
    :upper-limit="example2_to"
    :lower-limit="example2_from"
  />
</template>

Disabled dates ​

Settings:

  • Disabled date:

Result:

Code for this example
vue
<script setup>
import Datepicker from '../src/datepicker/Datepicker.vue'
import { ref } from 'vue'
import { add } from 'date-fns'
const pickedDate = ref(new Date())
const disabledDate = ref(add(new Date(), { days: 1 }))
</script>

<template>
  <Datepicker
    v-model="pickedDate"
    :disabledDates="{ dates: [disabledDate] }"
  />
</template>

Starting view ​

Settings:

Result:

Mininimal view ​

Settings:

Result:

Clearable ​

x
Code for this example
vue
<script setup>
import Datepicker from '../src/datepicker/Datepicker.vue'
import { ref } from 'vue'
const pickedDate = ref(new Date())
</script>

<template>
  <Datepicker v-model="pickedDate" :clearable="true" />
</template>

TIP

We can customize clearable view with slot for example:

Code for this example
vue
<script setup>
import Datepicker from '../src/datepicker/Datepicker.vue'
import { ref } from 'vue'
const pickedDate = ref(new Date())
</script>

<template>
  <Datepicker v-model="pickedDate" :clearable="true" placeholder="placeholder">
    <template v-slot:clear="{ onClear }">
      <button @click="onClear" style="color: red">x</button>
    </template>
  </Datepicker>
</template>