Awesome
<p align="center"> <a href="#" target="_blank"> <img alt="Litepie Datepicker" width="100" style="border-radius: 100%;" src="https://raw.githubusercontent.com/kenhyuwa/litepie-datepicker/main/assets/logo.png"> </a><br><br> Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. </p>Documentation
For full documentation, visit litepie.com.
Simple Usage
How it works,
<template>
<div>
<litepie-datepicker
ref="myRef"
:formatter="formatter"
v-model="dateValue"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import LitepieDatepicker from 'litepie-datepicker';
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
};
}
};
</script>
Theming options
-
Light mode
<p align="center"> <img src="https://raw.githubusercontent.com/kenhyuwa/litepie-datepicker/main/assets/light-mode.png" alt="Light mode" /> </p> -
Dark mode
<p align="center"> <img src="https://raw.githubusercontent.com/kenhyuwa/litepie-datepicker/main/assets/dark-mode.png" alt="Dark mode" /> </p>
Changelog
All notable changes to this project will be documented in this file, Read.
License
The MIT License. Please see for more information.
Thanks to
- Vue
- Tailwind CSS
- day.js
- and other support...