vue3-datepicker-lite
A simple datepicker component support Vue3.0!!
DEMO
Online Demo
SampleCode
import
import DatepickerLite from "vue3-datepicker-lite";
import DatepickerLite from "vue3-datepicker-lite/ts"; // TypeScript
component
<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="100"
: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"
></datepicker-lite>
sample data
const datepickerSetting = {
id: "birthday",
name: "birthday",
class: "myDateInput",
value: "2020/10/01",
placeholder: "Select",
isButtonType: false,
yearMinus: 0,
fromDate: "2020/02/10",
toDate: "2021/02/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,
}
release
ver 1.9.7 : fixed bugs. ref #21, #22
ver 1.9.6 : changed import file for TypeScript
ver 1.9.5 : fixed wrong path on index.js
ver 1.9.4 : fixed bugs. ref #20
ver 1.9.3 : removed `core-js` and added `index.d.ts` and no includes `compiler-core.esm-bundler.js`
ver 1.9.2 : fixed bugs
ver 1.9.1 : added auto-complate slash in the input field
ver 1.9.0 : added show-bottom-button option and years-range option
ver 1.8.9 : added months-option on locale-options
ver 1.8.8 : added switch to button-type option
ver 1.8.7 : added autocomplated off option
ver 1.8.6 : fixed datepicker on window bottom will be over window height bug
ver 1.8.5 : fixed locale attribute bug
ver 1.8.4 : supported start weeks option
ver 1.8.3 : fixed disabledDate not work bug
ver 1.8.2 : fixed valueAttr can not to be null bug
ver 1.8.1 : supported placeholder
ver 1.8.0 : supported value-attr responsive
ver 1.7.0 : supported disable input
ver 1.6.0 : supported date format
