JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<div>
    <select>
    <option value ="" >-- Please select from the following list --</option>
    <option value ="sick" >Sick</option>
    <option value ="time" >Time off</option>
    </select>
</div>

<br/>

<div>Date(s): <input id="datePick" type="text"/></div>
<br/>

<div class="col-display">
 Date:<br>
<input type="text" name="">
 Start time:<br>
<input type="time" name="">
 End time:<br>
<input type="time" name="">
<input type="text" name="">
 Start time:<br>
</div>

CSS

.col-display {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
.datelength {
    width="30%";
}
.start{
    width="20%";
}
.end{
    width="20%";
}
.same{
    width="30%";
}

JavaScript

$('#datePick').multiDatesPicker();