Vue 3 Datepicker

A datepicker Vue component. Compatible with Vue 3 Only

• Demo
• Install
• Usage
• Date Formatting
• Props
• Events
• Disabled dates
• Highlighted dates

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

Demo

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

Install

npm install vuejs3-datepicker --save

yarn add vuejs3-datepicker

import Datepicker from 'vuejs3-datepicker';

export default {
  // ...
  components: {
    Datepicker
  }
  // ...
}

Usage

<datepicker></datepicker>

value prop if passed should be a Date object

<script>
var state = {
  date: new Date(2016, 9,  16)
}
</script>
<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>

Programatic access of datepicker value

<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

Prop	Type	Default	Description
modelValue	Date|String		Date value of the datepicker via v-model
value	Date|String		Date value of the datepicker
format	String|Function	dd MMM yyyy	Date formatting string or function
full-month-name	Boolean	false	To show the full month name
disabled-dates	Object		See below for configuration
placeholder	String		Input placeholder text
inline	Boolean		To show the datepicker always open
calendar-class	String|Object		CSS class applied to the calendar el
input-class	String|Object		CSS class applied to the input el
wrapper-class	String|Object		CSS class applied to the outer div
monday-first	Boolean	false	To start the week on Monday
clear-button	Boolean	false	Show an icon for clearing the date
clear-button-icon	String		Use icon for button (ex: fa fa-times)
calendar-button	Boolean	false	Show an icon that that can be clicked
calendar-button-icon	String		Use icon for button (ex: fa fa-calendar)
calendar-button-icon-content	String		Use for material-icons (ex: event)
day-cell-content	Function		Use to render custom content in day cell
initial-view	String	minimumView	If set, open on that view
disabled	Boolean	false	If true, disable Datepicker on screen
typeable	Boolean	false	If true, allow the user to type the date
use-utc	Boolean	false	use UTC for time calculations
open-date	Date|String		If set, open on that date
minimum-view	String	'day'	If set, lower-level views won't show
maximum-view	String	'year'	If set, higher-level views won't show
preventDisableDateSelection	Boolean	true	will prevent selection of disabled date
iconColor	String	black	will change calendar icon color
iconWidth	String	Number	16
iconHeight	String	Number	16

Events

These events are emitted on actions in the datepicker

Event	Output	Description
opened		The picker is opened
closed		The picker is closed
selected	Date|null	A date has been selected
input	Date|null	Input value has been modified
cleared		Selected date has been cleared
changed-month	Object	Month page has been changed
changed-year	Object	Year page has been changed
changed-decade	Object	Decade page has been changed

Disabled Dates

Dates can be disabled in a number of ways.

<script>
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
  }
}
</script>

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

Highlighted Dates

<script>
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
  }
}
</script>
<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 

e.g

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,
    days,
    language: langName,
    yearSuffix,
    ymd,
    rtl,
    langName,
    daysNames,
  };
};

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

Contributors:

• Shubhadip Maity
• Vivek Singh