Vue Tailwind Picker

Datepicker for vue.js & tailwindcss, build with dayjs

Installation

$ npm install vue-tailwind-picker --save

Usage

Vue.js

import VueTailwindPicker from 'vue-tailwind-picker'
export default {
  components: {
    VueTailwindPicker  
  }
}

Nuxt.js Create plugin inside plugins directory e.g v-tailwind-picker.js

import Vue from 'vue'
import VueTailwindPicker from 'vue-tailwind-picker'

Vue.use(VueTailwindPicker)

then add to nuxt.config.js

{
  plugins: [
    '~/plugins/v-tailwind-picker'
  ]
}

Example on nuxt.js

<template>
<client-only>
    <VueTailwindPicker
        start-date="2020-01-01"
        end-date="2021-12-31"
        format-date="YYYY-MM-DD"
        :inline="true"
        :className="{
            base: 'gray-100',
            hover: 'gray-200',
            color: {
                default: 'gray-700',
                holiday: 'red-400',
                weekend: 'green-400',
                selected: 'red-500',
                event: 'indigo-500',
            },
        }"
        :event-date="[
            {
                date: '2020-01-01',
                description: 'Happy new year',
                holiday: true,
            },
        ]"
        @change="
            (value) => {
                picker = value
            }
        "
    >
    <input
      v-model="picker"
      type="text"
      placeholder="Datepicker"
      readonly
    />
    </VueTailwindPicker>
</client-only>
</template>

<script>
export default {
    data() {
        return {
            picker: ''
        }
    }
}
</script>

Options/Props

Props	Type	Required	Default
startDate	String	false	dayjs().format('YYYY-MM-DD')
endDate	String	false	undefined
formatDate	String	false	YYYY-MM-DD
inline	Boolean	false	false
className	Object	false	see example
@change	Event	false

Contributing

please contribute to be better...

License

MIT