JSFiddle - React, Tailwind, and code Playground

by william

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
Select a time: <input class="datepicker" />

CSS

button.ui-button-icon-only { 
    width: 1em;
    margin-left: 0.5em;
}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

JavaScript

$('.datepicker').datetimepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    numberOfMonths: 2,
    showAnim: 'fade',
    showOn: "both",
    minuteGrid: 10,
    stepMinute: 10,
    ampm: true
}).next('button').text('').button({
    icons: {
        primary: 'ui-icon-calendar'
    },
    text: false
});

$('#ui-datepicker-div').hide();