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">
    <input id="Target1" />
</div>
<div class="holder">
    <input id="Target2" />
</div>
<div class="holder">
    <input id="Target3" value="2012-12-12" />
</div>
<div class="holder">
    <input id="Target4" value="2012-12-12 17:30" />
</div>
      
<br/>
<hr/>
<br/>
<!--
-->
<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 DateTimeSlider-date">
            <input class="ui-state-default" />
            <span class="ui-icon ui-icon-calendar"></span>
        </span>
        <span class="ui-state-default ui-corner-all DateTimeSlider-time">
            <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 DateTimeSlider-date">
            <input class="ui-state-active" />
            <span class="ui-icon ui-icon-calendar"></span>
        </span>
        <span class="ui-state-default ui-corner-all DateTimeSlider-time">
            <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 DateTimeSlider-date">
            <input class="datepicker ui-state-active" />
            <span class="ui-icon ui-icon-calendar"></span>
        </span>
        <span class="DateTimeSlider-timer">
            <div class="ui-widget ui-widget-content ui-corner-all">
                <a class="ui-slider-handle ui-state-default ui-corner-all">
                ...

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, div.DateTimeSlider.ui-state-default input {
    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.DateTimeSlider-timer, div.DateTimeSlider span.datepicker {
    height: 1.1em;
}

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

div.DateTimeSlider span.DateTimeSlider-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.DateTimeSlider-timer > div > a.ui-slider-handle{
    cursor: pointer;
    height: 1.1em;
    width: 4.2em;
}

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

JavaScript

$.widget( "ui.DateTimeSlider", {
    },
    /*
    Keep refrences to important sections of the widget without having to re-select.
    We should never be re-selecting something we created. Ever. Don't do it.
    
    This constructor is invoked on _create, it needs to be unique per element.
    as widget would otherwise create this under the prototype chain.
    */
    DOM : function() {
        
        /*
        Skeleton of Widget, without the parts that change.
        
        TODO: detect if skeleton is build, if true, then simply swap components rather than re-building the whole thing.
        */
        this.buildDOM = function(state, DocumentObjects, options, stateHandler) {
            var holder     = $("<div/>");   //Holder for the widget.
            var dateHolder = $("<span/>");  //Holder for the datePicker component.
            var timeHolder = $("<span/>");  //Holder for the timeSlider component.
            var DOM = this;
            
            //Widget-specific styles
            holder.addClass("DateTimeSlider");
            dateHolder.addClass("DateTimeSlider-date");
            timeHolder.addClass("DateTimeSlider-time");
            
            //jQuery styles
            holder.addClass("ui-widget-header ui-widget ui-widget-content ui-corner-all");
            dateHolder.addClass("ui-corner-all");
            
            //Construct holder 
            holder.append(dateHolder);
            holder.append(timeHolder);
            
            DocumentObjects.holder     = holder;
            DocumentObjects.dateHolder = dateHolder;
            DocumentObjects.timeHolder = timeHolder;
                
            var components = this.buildList[state](DocumentObjects, options);
            
            //Merge callback option with stateHandler detectState.
            if (! options.datepicker.hasOwnProperty("onClose")) {
                options.datepicker.onClose = function(){
                   ...