jonya-datepicker
Version:
A date range picker component for Vue.js and Tailwind CSS, dependent to day.js
78 lines (62 loc) • 1.8 kB
Markdown
<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](https://litepie.com).
## Simple Usage
How it works,
```vue
<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](CHANGELOG.md).
## License
The [MIT](LICENSE) License. Please [see](http://opensource.org/licenses/MIT) for more information.
## Thanks to
- [Vue](https://v3.vuejs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [day.js](https://day.js.org/)
- and other support...