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: