Vue 3 Date Picker Using TailwindCSS

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