JSFiddle - React, Tailwind, and code Playground

by BDG

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css">
<div class="holder">
    <p>inactive no datetime</p>
    <div class="DateTimeSlider ui-widget-header ui-widget ui-widget-content ui-corner-all ui-state-default">
        <span class="ui-state-default ui-corner-all">
            <input class="ui-state-default" />
            <span class="ui-icon ui-icon-calendar"></span>
        </span>
        <span class="ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-clock"></span>
        </span>
    </div>
</div>
<div class="holder">
    <p>active: no datetime</p>
    <div class="DateTimeSlider ui-widget-header ui-widget ui-widget-content ui-corner-all">
        <span class="ui-state-active ui-corner-all">
            <input class="ui-state-active" />
            <span class="ui-icon ui-icon-calendar"></span>
        </span>
        <span class="ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-clock"></span>
        </span>
    </div>
</div>
<div class="holder">
    <p>active date default time</p>
    <div class="DateTimeSlider ui-widget-header ui-widget ui-widget-content ui-corner-all">
        <span class="ui-state-active ui-corner-all">
            <input class="datepicker ui-state-active" />
            <span class="ui-icon ui-icon-calendar"></span>
        </span>
        <span class="timer">
            <div class="ui-widget ui-widget-content ui-corner-all">
                <a class="ui-slider-handle ui-state-default ui-corner-all">
                    00:00 <span class="ui-icon ui-icon-clock"></span>
                </a>
            </div>
        </span>
    </div>
</div>
<div class="holder">
    <p>active date pick time</p>
    <div class="DateTimeSlider ui-widget-header ui-widget ui-widget-content ui-corner-all">
        <span class="ui-state-active ui-corner-all">
            <input class="datepicker ui-state-active" />
            <span...

CSS

body {
    background: black;
}
.holder {
    margin: 5px;
    border: 2px solid black;
    background: white;
    padding: 10px;
    display: inline-block;
}

/*
DateTimeSlider.css
*/
div.DateTimeSlider {
    width: 18em;
    height: 1.5em;
    padding: 0.3em;
    display: inline-block;
    font-size: 1em;
}

div.DateTimeSlider.ui-state-default {
    cursor: pointer;
}

div.DateTimeSlider span input.ui-state-active, div.DateTimeSlider span input.ui-state-default{
    display: inline-block;
    border: 0px solid black;
    width: 6em;
    height: 1.3em;
    box-shadow: 0;
}


div.DateTimeSlider span{
    display: inline-block;
}

div.DateTimeSlider span.timer, div.DateTimeSlider span.datepicker {
    height: 1.1em;
}

div.DateTimeSlider span.timer > div.ui-slider-horizontal{
    height: 1.1em;
    width: 5em;
    margin-left: 2.0em;
    margin-right: 2.5em;
}

div.DateTimeSlider span.timer > div.ui-slider-horizontal > a.ui-slider-handle {
    text-decoration: none;
    height: 1.2em;
    margin-top: 0.3em;
    margin-left: -1.75em;
    width: 4.2em;
    background: white;
    
    border: 1px solid #AAA;
    border-radius: 4px;
    
}

div.DateTimeSlider span.timer > div > a.ui-slider-handle{
    cursor: pointer;
    height: 1.1em;
    width: 4.2em;
}

div.DateTimeSlider span.timer > div.ui-slider-horizontal {
    border: 0px;
    height:     1.5em;
    background: none;
}

JavaScript

/*
Working on the UI/UX of the DateTimeSlider...
 
    
*/

$(function() {
    $("input").datepicker();
    $("#specialCase").slider();
    $("#specialCase a.ui-slider-handle ").html('17:30 <span class="ui-icon ui-icon-clock"></span>');
    $("#specialCase").slider("option", "value", 73);
});