Home
Date & Time
Feature-rich Date Picker Component For Vue 3

Feature-rich Date Picker Component For Vue 3

shubhadip Last Updated: 2 weeks ago

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:

Feature-rich Date Picker Component For Vue 3

Changelog:

v1.1.2 (11/26/2023)

  • bugfix

v1.1.1 (11/04/2023)

  • bugfix

v1.1.0 (11/04/2023)

  • Add Arabic-Tunisia language

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

Related Posts

Tags:

Add Comment