JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://nazar-pc.github.io/PickMeUp/css/pickmeup.css">
<script src="https://nazar-pc.github.io/PickMeUp/js/jquery.js"></script>
<script src="https://nazar-pc.github.io/PickMeUp/js/jquery.pickmeup.js"></script>
<h1>PickMeUp - jQuery datepicker plugin</h1>
<a href="https://github.com/nazar-pc/PickMeUp">GitHub repository</a>
<section>
<h2>Input</h2>
<article>
<input type="text" value="01-01-2014">
</article>
</section>
<section>
<h2>Single date</h2>
<article>
<div class="single"></div>
</article>
</section>
<section>
<h2>Multiple dates</h2>
<article>
<div class="multiple"></div>
</article>
</section>
<section>
<h2>Dates range</h2>
<article>
<div class="range"></div>
</article>
</section>
<section>
<h2>3 calendars + range</h2>
<article>
<div class="3-calendars"></div>
</article>
</section>
JavaScript
$(function () {
$('.single').pickmeup({
flat : true
});
$('.multiple').pickmeup({
flat : true,
mode : 'multiple'
});
$('.range').pickmeup({
flat : true,
mode : 'range'
});
var plus_5_days = new Date;
plus_5_days.addDays(5);
$('.3-calendars').pickmeup({
flat : true,
date : [
new Date,
plus_5_days
],
mode : 'range',
calendars : 3
});
$('input').pickmeup({
position : 'right',
hide_on_select : true
});
});