Lite Date Picker Component For Vue 3

Description:

A simple and compact date picker component for Vue 3 apps.

How to use it:

1. Import the DatepickerLite component.

import { defineComponent } from "vue";
import DatepickerLite from "vue3-datepicker-lite";

2. Add the datepicker-lite component to the template.

<datepicker-lite />

3. Register the component and done.

export default defineComponent({
  name: "App",
  components: {
    DatepickerLite,
  }
});

4. Possible component props.

idAttr: {
  type: String,
},
nameAttr: {
  type: String,
},
classAttr: {
  type: String,
},
valueAttr: {
  type: String,
  default: "",
},
yearMinus: {
  type: Number,
  default: 0,
},
from: {
  type: String,
  default: "",
},
to: {
  type: String,
  default: "",
},
disabledDate: {
  type: Array,
  default: () => {
    return [];
  },
},
locale: {
  type: Object,
  default: () => {
    return {
      format: "{1}/{2}/{3}",
      weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      todayBtn: "Today",
      clearBtn: "Clear",
      closeBtn: "Close",
    };
  },
},

5. Trigger an event every time you change the date.

changeEvent: (value) => {
  console.log(value + " selected!");
}

Preview:

Lite Date Picker Component For Vue 3

Changelog:

v1.7.0 (11/23/2020)

  • add support to disable input

v1.6.0 (11/21/2020)

  • added supported date format

v1.5.0 (10/27/2020)

  • added disabled date function

v1.4.0 (10/26/2020)

  • fixed today button bug if has range

Download Details:

Author: linmasahiro

Live Demo: https://linmasahiro.github.io/vue3-datepicker-lite/dist/

Download Link: https://github.com/linmasahiro/vue3-datepicker-lite/archive/master.zip

Official Website: https://github.com/linmasahiro/vue3-datepicker-lite

Install & Download:

You Might Be Interested In:

Add Comment