Vue 3 Date Picker Using TailwindCSS

Install & Download:

# Yarn
$ yarn add vue-tailwind-datepicker
# NPM
$ npm i vue-tailwind-datepicker

Description:

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.7.2 (03/01/2024)

• bugfix

v1.7.1 (02/21/2024)

• i18n: import locales outside the component

v1.6.6 (02/05/2024)

• Update

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