Lite Date Picker Component For Vue 3

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: "",
},
startValueAttr: {
  type: String,
  default: "",
},
placeholderAttr: {
  type: String,
  default: "",
},
autocompleteAttr: {
  type: String,
  default: "off",
},
isButtonType: {
  type: Boolean,
  default: () => {
    return false;
  },
},
yearMinus: {
  type: Number,
  default: 0,
},
yearsRange: {
  type: Number,
  default: 10,
},
from: {
  type: String,
  default: "",
},
to: {
  type: String,
  default: "",
},
disabledDate: {
  type: Array,
  default: () => {
    return [];
  },
},
locale: {
  type: Object,
  default: () => {
    return {
      format: "YYYY/MM/DD",
      weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
      startsWeeks: 0,
      todayBtn: "Today",
      clearBtn: "Clear",
      closeBtn: "Close",
    };
  },
},
disableInput: {
  type: Boolean,
  default: false,
},
showBottomButton: {
  type: Boolean,
  default: true,
},

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.9.6 (12/02/2021)

  • Changed different import statement

v1.9.4 (12/01/2021)

  • Fixed bugs.

v1.9.3 (11/28/2021)

  • removed core-js and added index.d.ts and no includes compiler-core.esm-bundler.js

v1.9.2 (11/20/2021)

  • bugs fixed

v1.9.1 (06/15/2021)

  • added auto-complate slash in the input field

v1.9.0 (06/09/2021)

  • added show-bottom-button option and years-range option

v1.8.9 (04/12/2021)

  • rewritten by TypeScript
  • added months-option on locale-options

v1.8.8 (04/01/2021)

  • added button-type option

v1.8.7 (03/17/2021)

  • Added option to disable browser input autocomplete

v1.8.6 (02/17/2021)

  • fixed over window height bug

v1.8.5 (01/17/2021)

  • fixed locale attribute bug

v1.8.4 (01/14/2021)

  • supported start weeks option

v1.8.3 (01/10/2021)

  • fixed disabledDate not work for other date format.

v1.8.2 (01/01/2021)

  • fixed bugs

v1.8.1 (12/15/2020)

  • added placeholder

v1.8.0 (12/10/2020)

  • supported value-attr responsive

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:

Add Comment