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.
placeholder: '', i18n: 'en', inputClasses: '', disabled: false, disableInRange: false, disableDate: false, autoApply: true, shortcuts: true, separator: ' ~ ', formatter: () => ({ date: 'YYYY-MM-DD HH:mm:ss', month: 'MMM', }), startFrom: () => new Date(), weekdaysSize: 'short', weekNumber: false, options: () => ({ shortcuts: { today: 'Today', yesterday: 'Yesterday', past: period => `Last ${period} Days`, currentMonth: 'This Month', pastMonth: 'Last Month', }, footer: { apply: 'Apply', cancel: 'Cancel', }, }), modelValue: () => [new Date(), new Date()],
Preview:
Changelog:
v1.6.1 (10/13/2023)
- bugfix
v1.5.3 (10/09/2023)
- fix(input): stop event propagation on input typing
v1.5.2 (10/09/2023)
- feat(calendar): add new props to show week number in calendar
v1.5.2 (10/02/2023)
- feat(calendar): add new props to show week number in calendar
v1.5.1 (09/30/2023)
- New input icon slot
v1.5.0 (09/27/2023)
- Add boolean type for shortcuts props
- Typescript conversion
v1.4.6 (08/10/2023)
- Add boolean type for shortcuts props
v1.4.5 (06/04/2023)
- Update
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