Yet another Vue 3 date picker component styled with the latest Tailwind.css.
How to use it:
1. Import and register the date picker.
// globally import { createApp } from 'vue' import App from '@/App.vue' import VueTailwindDatepicker from 'vue-tailwind-datepicker' const app = createApp(App) app.use(VueTailwindDatepicker) app.mount('#app')
// locally import { ref } from 'vue' import VueTailwindDatepicker from 'vue-tailwind-datepicker' const dateValue = ref([]) <template> <vue-tailwind-datepicker v-model="dateValue" /> </template>
2. Add TailwindCSS configurations.
const colors = require("tailwindcss/colors") module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "./node_modules/vue-tailwind-datepicker/**/*.js" ], theme: { extend: { colors: { "vtd-primary": colors.sky, // Light mode Datepicker color "vtd-secondary": colors.gray, // Dark mode Datepicker color }, }, }, plugins: [ require('@tailwindcss/forms'), ] }
3. Available date picker props.
noInput: Boolean, overlay: Boolean, asSingle: Boolean, useRange: Boolean, placeholder: { type: [Boolean, String], default: false }, i18n: { type: String, default: 'en' }, inputClasses: { type: String, default: '' }, disableInRange: { type: Boolean, default: true }, disableDate: { type: [Boolean, Array, Function], default: false }, 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() }, weekdaysSize: { type: String, default: 'short' }, 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.4.4 (05/02/2023)
- Fix Dark mode for before triangle
- Add “disabled” prop to handle a fully disabled date picker
v1.4.3 (03/15/2023)
- Update
v1.4.1 (03/14/2023)
- Added tw- prefix for all tailwind classes
- Remove $ sign so that the command can be copied easily
- Add clearPicker as public method
v1.3.2 (03/01/2023)
- Update
v1.3.1 (02/17/2023)
- Export datepicker props interface
v1.3.0 (02/17/2023)
- Added prop for choose between weekdaysShort and weekdaysMi
v1.2.12 (02/08/2023)
- Bugfix
v1.2.11 (02/01/2023)
- Fix responsive width
v1.2.10 (01/26/2023)
- Fix close function and import onBeforeMount
v1.2.9 (01/23/2023)
- Fix close function and import onBeforeMount
v1.2.7 (01/22/2023)
- Set initial value when mounting component
- Emit month/year/page(prev/next)
v1.2.6 (12/27/2022)
- Better focus management
v1.2.4 (12/26/2022)
- Update
v1.2.3 (12/13/2022)
- Enable shortcut for range & single
v1.2.1 (12/12/2022)
- Conditionnal close
v1.2.0 (12/11/2022)
- Display datepicker without input
Download Details:
Author: elreco
Live Demo: https://vue-tailwind-datepicker.com/demo.html
Download Link: https://github.com/elreco/vue-tailwind-datepicker/archive/refs/heads/main.zip
Official Website: https://github.com/elreco/vue-tailwind-datepicker
Install & Download:
# Yarn
$ yarn add vue-tailwind-datepicker
# NPM
$ npm i vue-tailwind-datepicker