Feature-rich Date Picker Component For Vue 3

A feature-rich, highly customizable, user-friendly date picker component for Vue 3.

More Features:

• Custom themes.
• Month/Year/Day view.
• Custom icon.
• Custom trigger element.

How to use it:

1. Import the date picker component.

import Datepicker from 'vuejs3-datepicker';

2. Register.

export default {
  components: {
    Datepicker
  }
}

3. Add the component to the app.

<datepicker>
</datepicker>

4. Config the date picker component by passing the following props:

odelValue: {
  type: [Date as new () => Date, String, Number],
},
value: {
  type: [Date as new () => Date, String, Number],
},
format: {
  type: [String, Function],
  default: 'dd MMM yyyy',
},
language: {
  type: String,
  default: 'en',
},
openDate: {
  validator: (val: Date): boolean => validateDateInput(val),
  type: Date as new () => Date,
},
minimumView: {
  type: String,
  default: 'day',
},
maximumView: {
  type: String,
  default: 'year',
},
name: {
  type: String,
},
id: {
  type: String,
},
dayCellContent: {
  type: Function,
},
fullMonthName: {
  type: Boolean,
},
disabledDates: {
  type: Object,
},
highlighted: {
  type: Object,
},
placeholder: {
  type: String,
},
inline: {
  type: Boolean,
},
calendarClass: {
  type: [String, Object, Array],
},
inputClass: {
  type: [String, Object, Array],
},
wrapperClass: {
  type: [String, Object, Array],
},
mondayFirst: {
  type: Boolean,
},
clearButton: {
  type: Boolean,
},
clearButtonIcon: {
  type: String,
},
calendarButton: {
  type: Boolean,
},
calendarButtonIcon: {
  type: String,
},
calendarButtonIconContent: {
  type: String,
},
addBootstrapClass: {
  type: Boolean,
},
initialView: {
  type: String,
},
disabled: {
  type: Boolean,
},
required: {
  type: Boolean,
},
typeable: {
  type: Boolean,
},
useUtc: {
  type: Boolean,
},
hideInput: {
  type: Boolean,
  default: true,
},
preventDisableDateSelection: {
  type: Boolean,
  default: true,
},
iconColor: {
  default: 'black',
  type: String,
},
iconHeight: {
  default: 16,
  type: [String, Number],
},
iconWidth: {
  default: 16,
  type: [String, Number],
},
theme: {
  default: 'green',
  type: String,
},

Preview:

Changelog:

v1.0.19 (05/24/2023)

• bugfix

v1.0.16 (02/12/2023)

• handling clear date reactivity

v1.0.14 (01/30/2023)

• Bug Fixes

v1.0.13 (11/04/2022)

• bugfix

v1.0.12 (08/29/2022)

• bugfix

v1.0.11 (08/27/2022)

• bugfix

v1.0.7 (07/17/2022)

• bugfix

v1.0.6 (05/20/2022)

• fix: small default date fix

v1.0.5 (02/06/2022)

• opendate fixes

v1.0.4 (02/03/2022)

• check for openDate while init

v1.0.3 (01/30/2022)

• Bug Fixes

v1.0.2 (01/27/2022)

• Bug Fixes

v1.0.1 (01/08/2022)

• fix: merge conflicts resolved

Download Details:

Author: shubhadip

Live Demo: https://vuejs3-datepicker.netlify.app/

Download Link: https://github.com/shubhadip/vuejs3-datepicker/archive/refs/heads/master.zip

Official Website: https://github.com/shubhadip/vuejs3-datepicker

Install & Download:

# Yarn
$ yarn add vuejs3-datepicker

# NPM
$ npm i vuejs3-datepicker