JSFiddle - React, Tailwind, and code Playground

by BDG

HTML

<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">
                    00:00 <span class="ui-icon ui-icon-clock"></span>
                </a>
            </div>
        </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, 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

/*!
 * DateTimeSlider - jQueryUI Widget
 *
 * Copyright 2012, ExperiencePoint
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/MIT
 * http://www.opensource.org/licenses/GPL-2.0
 * 
 * http://ExperiencePoint.github.com/foo
 *
 * Depends:
 *   jquery.ui.core.js
 *   jquery.ui.widget.js
 *   jquery.ui.datepicker.js
 *   jquery.ui.slider.js
 */
(function( $ ) {
    
    /*
    List of states the widget can be in.
    */
    var stateList = [
        {   //State 0
            name : "inactive",
            description : "When input value is empty, and not clicked on once.",
            DOM : function(DocumentObjects){
                //Structure
                var datePicker = $("<input/>");
                DocumentObjects.datePicker = datePicker;
                                
                //Styles
                DocumentObjects.timeHolder.addClass("ui-corner-all DateTimeSlider-time");
            
                //State-aware jQuery styles
                DocumentObjects.holder.addClass("ui-state-default");
                DocumentObjects.dateHolder.addClass("ui-state-default");
                DocumentObjects.datePicker.addClass("ui-state-default");
                DocumentObjects.timeHolder.addClass("ui-state-default");
                
                //Build
                DocumentObjects.dateHolder.append(datePicker);
                DocumentObjects.dateHolder.append(DocumentObjects.dateIcon);
                DocumentObjects.timeHolder.append(DocumentObjects.timeIcon);
                //No return, pass by object reference.
            },
            events : function(state){
                domObjectHandler.datePicker.datepicker("show");
                state.widgetActivated = true;
            }
            
        },
        {   //State 1
            name: "nodate",
            description: "When input value is empty, but clicked on once.",            
            DOM : function(DocumentObjects){
      ...