Feature-rich Date Picker Component For Vue 3

Install & Download:

# Yarn
$ yarn add vuejs3-datepicker
# NPM
$ npm i vuejs3-datepicker

Description:

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,
},