JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>
<input type="text">

CSS

/* css for timepicker */
 .ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}
.ui-timepicker-div dl {
    text-align: left;
}
.ui-timepicker-div dl dt {
    float: left;
    clear:left;
    padding: 0 0 0 5px;
}
.ui-timepicker-div dl dd {
    margin: 0 10px 10px 45%;
}
.ui-timepicker-div td {
    font-size: 90%;
}
.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}
.ui-timepicker-rtl {
    direction: rtl;
}
.ui-timepicker-rtl dl {
    text-align: right;
    padding: 0 5px 0 0;
}
.ui-timepicker-rtl dl dt {
    float: right;
    clear: right;
}
.ui-timepicker-rtl dl dd {
    margin: 0 45% 10px 10px;
}

JavaScript

$(function () {
    $('input').datetimepicker(
        {
	addSliderAccess: true,
	sliderAccessArgs: { touchonly: false }
});
});