Home
Date & Time
Vue 3 Date Picker Using TailwindCSS

Vue 3 Date Picker Using TailwindCSS

elreco Last Updated: 2 months ago

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:

Vue 3 Date Picker Using TailwindCSS

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

Related Posts

Tags:,

Add Comment