Vue Tailwind Datepicker

Datepicker component based on Tailwind and Vue

![Github All Releases]()

!Vue Tailwind Datepicker

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
``$xslt
yarn add @coding-wisely/vue-tailwind-datepicker
`
Npm
`
npm install @coding-wisely/vue-tailwind-datepicker
`


Usage

- Add VueTailwindDatepicker into your app:

`javascript
import VueTailwindDatepicker from 'vue-tailwind-datepicker'

Vue.use(VueTailwindDatepicker)
`

- Use the vue-tailwind-datepicker component:

`html

`

Installation

$3

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

Then use the component directly:

`html



`

$3

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

`html

`

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

Manually install the plugin into Vue:

`javascript
Vue.use(VueTailwindDatepicker)
`

Or use the component directly:

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

$3

Test all props on Code Pen.

IMPORTANT

Props shall be called with hypens.

__Example:__

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, 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.