Skip to content
On this page

General configuration

General behavior props configuration

Info

  • When checking the examples, for boolean prop types, the example will show the behavior opposite of what is set for the default value
  • If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, monthChangeOnScroll as month-change-on-scroll and so on

uid

Pass an id to the input and menu elements. If provided, you can select menu id as dp-menu-${uid} and input id as dp-input-${uid}

  • Type: string
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" uid="demo" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

month-change-on-scroll

Scrolling the mouse wheel over the calendar will change the month. Scroll down for next month and vice versa

You can also set the value to 'inverse', so that scrolling down will go to the previous month and up on the next

  • Type: boolean | 'inverse'
  • Default: true
Code Example
vue
<template>
    <Datepicker v-model="date" :month-change-on-scroll="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

model-value v-model

v-model binding

  • Type:
    • Single picker: Date | string
      • In case of multiDates it will be Date[] | string[]
    • Month picker: { month: number | string; year: number | string }
    • Time picker: { hours: number | string; minutes: number | string; seconds?: number | string }
    • Week picker: [Date, Date] | [string, string]
    • Range picker: [Date, Date] | [string | string]
      • If you use time picker, it will be { hours: number | string; minutes: number | string; seconds?: number | string }[]
      • If you use month picker, it will be { month: number | string; year: number | string }[]
    • Year picker: number | string
  • Default: null
Code Example
vue
<template>
   <div>
       <Datepicker id="manual" :model-value="date" @update:model-value="setDate" />
       <Datepicker id="auto" v-model="date" />
   </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        const setDate = (value) => {
            date.value = value;
        }
        
        return {
            date,
            setDate,
        }
    }
}
</script>

model-type

Specify a custom format for v-model

  • Type: 'timestamp' | 'format' | string
  • Default: null

Note

  • timestamp - uses timestamp for binding
  • format - uses provided format or fallbacks to the default one. Must be a string
  • string - use custom format by providing a custom pattern with unicode tokens

This is only compatible with date pickers, specific modes are not supported

Code Example
vue
<template>
    <Datepicker v-model="date" model-type="dd.MM.yyyy" />
    <p v-if="date">Selected date: {{ date }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

clearable

Add a clear icon to the input field where you can set the value to null

  • Type: boolean
  • Default: true
Code Example
vue
<template>
    <Datepicker v-model="date" :clearable="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

close-on-scroll

Close datepicker menu on page scroll

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" close-on-scroll />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

auto-apply

If set to true, clicking on a date value will automatically select the value

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" auto-apply />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

placeholder

Input placeholder

  • Type: string
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" placeholder="Select Date" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

no-today

Hide today mark from the calendar

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" no-today />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

close-on-auto-apply

If set to false, clicking on a date value will automatically select the value but will not close the datepicker menu. Closing will be available on a click-away or clicking on the input again

  • Type: boolean
  • Default: true
Code Example
vue
<template>
    <Datepicker v-model="date" auto-apply :close-on-auto-apply="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

markers

Add markers to the specified dates with (optional) tooltips

  • Type: Markers[]
  • Default: []
ts
interface Markers {
    date: Date | string;
    type?: 'dot' | 'line';
    tooltip?: { text: string; color?: string;}[];
    color?: string;
}
Code Example
vue

<template>
    <Datepicker v-model="date" :markers="markers" />
</template>

<script>
import { ref } from 'vue';

import addDays from 'date-fns/addDays';

export default {
    setup() {

        const date = ref(new Date());
        const markers = ref([
          {
            date: addDays(new Date(), 1),
            type: 'dot',
            tooltip: [{ text: 'Dot with tooltip', color: 'green' }],
          },
          {
            date: addDays(new Date(), 2),
            type: 'line',
            tooltip: [
              { text: 'First tooltip', color: 'blue' },
              { text: 'Second tooltip', color: 'yellow' },
            ],
          },
          {
            date: addDays(new Date(), 3),
            type: 'dot',
            color: 'yellow',
          },
        ])
      
        return {
            date,
            markers,
        }
    }
}
</script>

highlight

Specify highlighted dates

  • Type: Date[] | string[] | number[] | ((date: Date) => boolean)
  • Default: []
Code Example
vue
<template>
    <Datepicker v-model="date" :highlight="highlightedDates" />
</template>

<script>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

export default {
    setup() {
        const date = ref(new Date());
        const highlightedDates = ref([
          addDays(new Date(), 1),
          addDays(new Date(), 2),
          addDays(new Date(), 3),
        ])
        
        return {
            date,
            highlightedDates,
        }
    }
}
</script>

highlight-week-days

Specify highlighted days of the week

  • Type: number[]
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" :highlight-week-days="[0, 6]" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

highlight-disabled-days

Keep disabled dates highlighted. By default, highlighted dates, if disabled, are marked as disabled

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" 
                :highlight="highlightedDates"
                :disabled-dates="highlightedDates"
                highlight-disabled-days />
</template>

<script>
import { ref } from 'vue';
import addDays from 'date-fns/addDays';

export default {
    setup() {
        const date = ref(new Date());
        const highlightedDates = ref([
          addDays(new Date(), 1),
          addDays(new Date(), 2),
          addDays(new Date(), 3),
        ])
        
        return {
            date,
            highlightedDates,
        }
    }
}
</script>

show-now-button

Enable button to select current date and time

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" show-now-button />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

disabled

Disables the input

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" disabled />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

readonly

Sets the input in readonly state

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" readonly />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

required

Add required flag to the input field. Use with form tag for built-in validation

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <form @submit.prevent="submitForm">
      <Datepicker v-model="date" required />
      <button type="submit">Submit form</button>
    </form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        const submitForm = () => {
          alert('Form submitted');
        }
        
        return {
            date,
            submitForm,
        }
    }
}
</script>

name

Sets the input name attribute

  • Type: string
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" name="date-picker" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

autocomplete

Sets the input autocomplete attribute

  • Type: string
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" autocomplete="off" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

keep-action-row

When enabled, it will keep the action row even if the auto-apply prop is enabled

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" auto-apply keep-action-row :close-on-auto-apply="false" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

no-swipe

Disable touch events on the calendar

  • Type: Boolean
  • Default: false
Code Example
vue

<template>
    <Datepicker v-model="date" no-swipe />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
      
        return {
            date,
        }
    }
}
</script>

hide-navigation

Hide navigation buttons from the overlays

  • Type: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]

  • Default: []

Code Example
vue

<template>

    <Datepicker v-model="date" :hide-navigation="['month', 'year']" />

</template>


<script>

import { ref } from 'vue';


export default {

    setup() {

        const date = ref(new Date());

        
        return {

            date,

        }

    }

}

</script>

on-click-outside

Provide custom click outside handler. Exposed validation function that will return true or false depending on the selected value

  • Type: validate: () => boolean) => void
  • Default: null
Code Example
vue
<template>
    <Datepicker ref="dpRef" v-model="date" :on-click-outside="onClickOutside" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        const dpRef = ref();
        
        const onClickOutside = () => {
          if (dpRef.value) dpRef.value.closeMenu();
          alert('Click outside handler')
        }
        
        return {
            date,
            onClickOutside
        }
    }
}
</script>

Released under the MIT License.