Vue Tailwind Datepicker

Datepicker component based on Tailwind and Vue

Table of Contents

• Getting started
• Usage
  • Npm
  • Browser
• Usage
  • Props
• Credits & Contributors

##Requirements Some prerequesities are required, so i suppose you have tailwind.css and vue.js already in place in your app. If not, first install Tailwind.css and Vue.js.

Getting started

• Install the plugin:

  Yarn

  yarn add @coding-wisely/vue-tailwind-datepicker

  Npm

  npm install @coding-wisely/vue-tailwind-datepicker

Usage

• Add VueTailwindDatepicker into your app:

  import VueTailwindDatepicker from 'vue-tailwind-datepicker'
  
  Vue.use(VueTailwindDatepicker)

• Use the vue-tailwind-datepicker component:

    <vue-tailwind-datepicker />

Installation

npm

  yarn add @coding-wisely/vue-tailwind-datepicker

Then use the component directly:

<!-- your-component.vue-->
<template>
  <vue-tailwind-datepicker v-model="date" @input="setStartDate"></vue-tailwind-datepicker>
</template>
<script>
import { VueTailwindDatepicker } from '@coding-wisely/vue-tailwind-datepicker'

export default {
    components: {
        VueTailwindDatepicker,
    },
    data(){
        return {
            startDate: '',
            form: {}
        }
    },
    methods: {
        setStartDate(startDate) {
            this.form.startDate = startDate;
        }
    }
};
</script>

Browser

Include script into your html page before closing body tag . It must be included after Tailwind.css and Vue.js are loaded.

<script src="https://unpkg.com/@coding-wisely/vue-tailwind-datepicker"></script>

If Vue is detected in the Page, the plugin is installed automatically.

Manually install the plugin into Vue:

Vue.use(VueTailwindDatepicker)

Or use the component directly:

Vue.component('vue-tailwind-datepicker', VueTailwindDatepicker)

Props

Test all props on Code Pen.

IMPORTANT

Props shall be called with hypens.

Example: <vue-tailwind-datepicker picker-wrapper-classess="flex w-full" />

REMEMBER

If you ad props classes, dont forget that defaults on particular props classes will not be applied at all, default will be ignored, and only your, props class will be applied. Means, <vue-tailwind-datepicker input-field-classess="w-full" /> will be applied on input field, and default classes on input field will be ignored.

| Property | Type | Default value | Description | | -------- | ---- | ------------- | ----------- | | pickerWrapperClasses | String | w-64 | CSS class that wraps component | | inputFieldClasses | String | focus:outline-none cursor-pointer w-full bg-white h-12 p-3 border-b border-purple-300 text-lg font-medium text-gray-700 | input field class | | pickerMonthSelectionClasses | String | flex justify-between h-12 w-full p-2 items-center bg-purple-100 uppercase | Datepicker header class with Month, Year and Previos and Next buttons| | pickerDaysHeaderClasses | String | flex w-full w-full justify-start text-center p-2 | Datepicker Days header (Su, Mo, Tu...) | | calendarWrapperClasses | String | flex w-full border-l border-r border-b border-purple-100 justify-start text-center flex-wrap | Wrapper around month calendar | | selectedDayClasses | String | bg-purple-500 text-white | CSS classes applied on date selected in month calendar | | currentDayClasses | String| bg-purple-300 text-white | CSS Classess applied on current date input | | chevronClasses | String | w-10 h-10 | CSS classess applied on Previous and Next SVG | | dateFormat | String | YYYY-MM-DD | Javascript moment library date format| | preselectedDay | String | `` | Javascript moment library date format and it shall match deafult dateFormat above | | closeOnClick | Boolean | true | Whether calendar days will close on click or not |

Made with ❤ by Coding Wisely.