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>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>
    </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 DateTimeSlider-date">
            <input class="datepicker ui-state-active" />
            <span class="ui-icon ui-icon-calendar"></span>
        </span>
        <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( $ ) {

$.widget( "ui.DateTimeSlider", {
    /*
    Defaults
    */
    options: {
        datepicker : {
            dateFormat : "yy-mm-dd"
        },
        slider : {
            step : 30,
            max  : 1439,
            min  : 0,
            value: 0
        },
        defaultTime : "00:00" //Midnight is the de facto start of a day.
    },
    /*
    Datetime storage and utility.
    */
    DateTime : {
        date     : null, //widget date string
        time     : null, //widget time string
        datetime : function(){
            return this.date + " " + this.time;
        }
    },
    /*
    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() {
        this.actual         = null;           //Original <input> we're applying the widget to
        this.datePicker     = null;           //Input box that gets a date pikcer applied to it.
        this.timeSlider     = null;           //Slider interface for time
        this.timeSliderText = null;           //Slider interface for time
        this.timeButton     = null;           //Non-slider display of time
        this.holder         = null;           //Holder for all the widget components.
        this.dateHolder     = null;           //Holder for date components
        this.timeHolder     = null;           //Holder for time...