npm i vuejs3-datepicker


vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

by shubhadip

1.0.16 (see all)TypeScript:Built-In
npm i vuejs3-datepicker

Vue 3 Datepicker

Netlify Status

A datepicker Vue component. Compatible with Vue 3 Only

To view demo examples locally clone the repo and run npm install && npm run dev


To view a demo online: https://vuejs3-datepicker.netlify.app/


npm install vuejs3-datepicker --save

yarn add vuejs3-datepicker
import Datepicker from 'vuejs3-datepicker';

export default {
  // ...
  components: {
  // ...



value prop if passed should be a Date object

var state = {
  date: new Date(2016, 9,  16)
<datepicker :value="state.date"></datepicker>

support name attribute for normal html form submission

<datepicker :value="state.date" name="uniquename"></datepicker>

Using v-model

<datepicker v-model="state.date" name="uniquename"></datepicker>

Emits events

<datepicker @selected="parentfunctionSelectedhandler" @opened="datepickerOpenedFunction" @closed="parentfunctionCloseHandler">

Inline always open version

<datepicker :inline="true"></datepicker>

Programtic Acess of value of datepicker

<datepicker ref="inputRef"  @selected="handleSelectDate" :disabled-dates="disabledDates" :highlighted="highlightDates" :value="date" @closed="handleCalendarClose" ></datepicker>
const { selectedDate } = (inputRef.value  as any).value; 

icon color, icon height, icon width of calendar

<datepicker :icon-color="color" :icon-width="width" :icon-height="height" ></datepicker>

Available props

modelValueDate|StringDate value of the datepicker via v-model
valueDate|StringDate value of the datepicker
formatString|Functiondd MMM yyyyDate formatting string or function
full-month-nameBooleanfalseTo show the full month name
disabled-datesObjectSee below for configuration
placeholderStringInput placeholder text
inlineBooleanTo show the datepicker always open
calendar-classString|ObjectCSS class applied to the calendar el
input-classString|ObjectCSS class applied to the input el
wrapper-classString|ObjectCSS class applied to the outer div
monday-firstBooleanfalseTo start the week on Monday
clear-buttonBooleanfalseShow an icon for clearing the date
clear-button-iconStringUse icon for button (ex: fa fa-times)
calendar-buttonBooleanfalseShow an icon that that can be clicked
calendar-button-iconStringUse icon for button (ex: fa fa-calendar)
calendar-button-icon-contentStringUse for material-icons (ex: event)
day-cell-contentFunctionUse to render custom content in day cell
initial-viewStringminimumViewIf set, open on that view
disabledBooleanfalseIf true, disable Datepicker on screen
typeableBooleanfalseIf true, allow the user to type the date
use-utcBooleanfalseuse UTC for time calculations
open-dateDate|StringIf set, open on that date
minimum-viewString'day'If set, lower-level views won't show
maximum-viewString'year'If set, higher-level views won't show
preventDisableDateSelectionBooleantruewill prevent selection of disabled date
iconColorStringblackwill change calendar icon color


These events are emitted on actions in the datepicker

openedThe picker is opened
closedThe picker is closed
selectedDate|nullA date has been selected
inputDate|nullInput value has been modified
clearedSelected date has been cleared
changed-monthObjectMonth page has been changed
changed-yearObjectYear page has been changed
changed-decadeObjectDecade page has been changed

Disabled Dates

Dates can be disabled in a number of ways.

var state = {
  disabledDates: {
    to: new Date(2016, 0, 5), // Disable all dates up to specific date
    from: new Date(2016, 0, 26), // Disable all dates after specific date
    dates: [ // Disable an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    preventDisableDateSelection: true

<datepicker :disabled-dates="state.disabledDates" :prevent-disable-date-selection="preventDisableDateSelection"></datepicker>

Highlighted Dates

var state = {
  highlighted: {
    to: new Date(2016, 0, 5), // Highlight all dates up to specific date
    from: new Date(2016, 0, 26), // Highlight all dates after specific date
    dates: [ // Highlight an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    includeDisabled: true // Highlight disabled dates
<datepicker :highlighted="state.highlighted"></datepicker>

Add new Locale

new Locale can be added to the following file /src/components/datepicker/locale/index.ts

create a function with new Locale name & export that from data object at the bottom 


const newLocale = (): any => {
  const langName = 'Hindi';
  const monthFullName = [
  const shortName = ['जन', 'फ़र', 'मार्च', 'अप्रै', 'मई', 'जून', 'जुला', 'अगस्त', 'सितं', 'अक्टू', 'नवं', 'दिसं'];
  const days = ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि'];
  const daysNames = ['रविवार', 'सोमवार', 'मंगलवार', 'बुधवार', 'गुरुवार', 'शुक्रवार', 'शनिवार'];
  const rtl = false;
  const ymd = false;
  const yearSuffix = '';
  return {
    months: monthFullName,
    monthsAbbr: shortName,
    language: langName,

export const data = {
  af: af(),
  hi: hi(),
  de: de(),
  en: en(),
  fr: fr(),
  nl: nl()
  newLocale: newLocale()


No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate