Tailwind CSS Advanced Datepicker

The Advanced Datepicker component for selecting date and time, ideally combining ease and powerful functionality.

Requires Additional Installation

Note that this component requires the use of the third-party Vanilla Calendar Pro plugin.

Requires JS

Note that this component requires the use of our Advanced Datepicker plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

How to use

Install Vanilla Calendar Pro

Install Vanilla Calendar Pro via npm
```
npm i vanilla-calendar-pro
```
Add the Vanilla Calendar Pro JavaScript

Include the JavaScript <script> near the end of your </body> tag:
```
<script src="./node_modules/lodash/lodash.min.js"></script><script src="./node_modules/vanilla-calendar-pro/index.js"></script>
```
Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash

Add Preline CSS for an Advanced Datepicker

Import the Preline UI Datepciker CSS file into your Tailwind CSS file. Here's how the full CSS file should look like:

                    
                      @import "tailwindcss";
                      
                      /* Preline UI */
                      @import "./node_modules/preline/variants.css";
                      @import "./node_modules/preline/src/plugins/datepicker/styles.css";

                      /* Plugins */
                      @plugin "@tailwindcss/forms";