Litepie is a date and date range picker Vue.js component build with Tailwind CSS and day.js.
How to use it:
1. Import the Litepie Datepicker component.
import { ref } from 'vue'; import LitepieDatepicker from 'litepie-datepicker';
2. Register the component.
export default { components: { LitepieDatepicker }, // ... };
3. Add the component to the app.
<template> <div> <litepie-datepicker ref="myRef" v-model="dateValue" /> </div> </template>
export default { components: { LitepieDatepicker }, setup() { const myRef = ref(null); const dateValue = ref([]); return { myRef, dateValue }; } };
4. Customize the date format.
<template> <div> <litepie-datepicker ref="myRef" :formatter="formatter" v-model="dateValue" /> </div> </template>
export default { components: { LitepieDatepicker }, setup() { const myRef = ref(null); const dateValue = ref([]); const formatter = ref({ date: 'DD MMM YYYY', month: 'MMM' }); return { myRef, dateValue, formatter }; } };
5. Available component props.
overlay: Boolean, asSingle: Boolean, useRange: Boolean, placeholder: { type: [Boolean, String], default: false }, i18n: { type: String, default: 'en' }, disableDate: { type: [Boolean, Array, Function], default: false }, disableInRange: { type: Boolean, default: true }, trigger: { type: String, default: null }, autoApply: { type: Boolean, default: true }, shortcuts: { type: [Boolean, Function], default: true }, separator: { type: String, default: ' ~ ' }, formatter: { type: Object, default: () => ({ date: 'YYYY-MM-DD HH:mm:ss', month: 'MMM' }) }, modelValue: { type: [Array, Object, String], default: [] }, startFrom: { type: [Object, String], default: () => new Date() }, options: { type: Object, default: () => ({ shortcuts: { today: 'Today', yesterday: 'Yesterday', past: period => `Last ${period} Days`, currentMonth: 'This Month', pastMonth: 'Last Month' }, footer: { apply: 'Apply', cancel: 'Cancel' } }) }
Preview:
Changelog:
v1.0.15 (06/13/2022)
- Tailwind 3 support
v1.0.14 (03/31/2021)
- Fixed issues on keyup
v1.0.13 (03/25/2021)
- Fix issues dynamic import on Vite
v1.0.12 (03/21/2021)
- Fix issues localization lazy load.
v1.0.11 (03/20/2021)
- Trigger emit on keyup event.
v1.0.10 (03/20/2021)
- Fix bug
start-from
if using localization
v1.0.9 (03/20/2021)
- Props footer removed.
- Fix localization
- Fix bug auto-apply if shortcuts clicked.
- Add new props options
v1.0.8 (03/20/2021)
- Add localization for shortcuts, footer & dayjs locale.
- New props i18n
- Change local model value to pickerValue.
- Fix issues placement arrow, left to right.
v1.0.7 (03/17/2021)
- Bugs fixed
v1.0.6 (03/17/2021)
- New props footer
- Redesign layout, for breakpoint 768 ~ 1024
- Hide Next/Prev button if months active
v1.0.5 (03/16/2021)
- Added dayjs customParseFormat plugin, to correctly parse from formatter props
- Added keyboard event keyup for update value
v1.0.4 (03/13/2021)
- Fix bug when use custom shortcuts
v1.0.3 (03/10/2021)
- Fixed typo inRangeBetween
v1.0.2 (03/09/2021)
- Expose placeholder, clear function into slot props
Download Details:
Author: kenhyuwa
Live Demo: https://litepie.com/
Download Link: https://github.com/kenhyuwa/litepie-datepicker/archive/main.zip
Official Website: https://github.com/kenhyuwa/litepie-datepicker
Install & Download:
# NPM
$ npm i litepie-datepicker