vue3-datepicker-lite

npm install vue3-datepicker-lite --save

add to your project

import DatepickerLite from 'vue3-datepicker-lite'

set component attribuite

                            
<datepicker-lite
  :id-attr="datepickerSetting.id"
  :name-attr="datepickerSetting.name"
  :class-attr="datepickerSetting.class"
  :value-attr="datepickerSetting.value"
  :placeholder-attr="datepickerSetting.placeholder"
  :is-button-type="datepickerSetting.isButtonType"
  :year-minus="datepickerSetting.yearMinus"
  :years-range="10"
  :from="datepickerSetting.fromDate"
  :to="datepickerSetting.toDate"
  :disabled-date="datepickerSetting.disabledDate"
  :locale="datepickerSetting.locale"
  @value-changed="datepickerSetting.changeEvent"
  :disable-input="datepickerSetting.disableInput"
  :show-bottom-button="true"
/>
                            
                        

sample setting data:

                            
const datepickerSetting = {
  id: "birthday",
  name: "birthday",
  class: "myDateInput",
  value: "2020/10/01",
  placeholder: "Select",
  isButtonType: false,
  yearMinus: 0,
  fromDate: "2010/02/10",
  toDate: "2030/12/10",
  disabledDate: [
    "2020/10/02",
    "2020/10/03",
    "2020/10/04",
    "2020/10/05",
    "2020/10/06",
  ],
  locale: {
    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",
  },
  changeEvent: (value) => {
    console.log(value + " selected!");
  },
  disableInput: false,
}

// if u want to change date format
const datepickerSetting2 = {
  id: "birthday2",
  name: "birthday2",
  class: "myDateInput",
  value: "01/10/2020",
  placeholder: "Select",
  isButtonType: false,
  yearMinus: 0,
  fromDate: "10/02/2020",
  toDate: "10/02/2021",
  disabledDate: [
    "02/10/2020",
    "03/10/2020",
    "04/10/2020",
    "05/10/2020",
    "06/10/2020",
  ],
  locale: {
    format: "DD-MM-YYYY",
    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",
  },
  changeEvent: (value) => {
    console.log(value + " selected!");
  },
  disableInput: false,
}

// if u want to change to your country years and not input box.
const datepickerSetting3 = {
  id: "birthday3",
  name: "birthday3",
  class: "myDateInput",
  value: "2020/10/01",
  placeholder: "Select",
  isButtonType: true,
  yearMinus: 1911,
  yearsRange: 10,
  fromDate: "2020/02/10",
  toDate: "",
  disabledDate: [],
  locale: {
    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",
  },
  changeEvent: (value) => {
    console.log(value + " selected!");
  },
  disableInput: false,
};