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.

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
},
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()
},
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:

Vue 3 Date Picker Using TailwindCSS

Changelog:

v1.0.8 (09/28/2022)

  • Update packages

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

Add Comment