Vue Tailwind Picker

Datepicker for vue.js of tailwindcss & dayjs

Installation

NPM

$ npm install vue-tailwind-picker --save

CDN

<script src="https://unpkg.com/vue-tailwind-picker@1.0.1/dist/vue-tailwind-picker.min.js"></script>

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">
  import VueTailwindPicker from 'https://cdn.jsdelivr.net/npm/vue-tailwind-picker@1.0.1/dist/vue-tailwind-picker.esm.js'
</script>

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"
            :class-name="{
                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,
                },
                {
                    date: '2020-02-14',
                    description: 'Happy valentine day',
                    holiday: false,
                },
            ]"
            @change="(v) => (picker = v)"
        >
        <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	$emit()

Contributing

please contribute to be better...

License

MIT