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:
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: