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