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"], startsWeeks: 0, todayBtn: "Today", clearBtn: "Clear", closeBtn: "Close", }; }, },
5. Trigger an event every time you change the date.
changeEvent: (value) => { console.log(value + " selected!"); }
Preview:
Changelog:
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: