JSFiddle - React, Tailwind, and code Playground

by BDG

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<br>
<br>
<input  id="a" value="2012-05-2Fork4 13:30"/>
<br>
<input  id="b" value=""/>
<br>
<input  id="c" value="2012-05-24"/>
<br>
<input  id="d" value="2012-05-24 13:30"/>

CSS

span, div { margin 5px;
    padding 3px;
    border 1px solid red;
}

/*
DateTimeSlider.css
*/
span.DateTimeSlider > span > div {
  display: inline-block;
  width:   155px;
}
span.DateTimeSlider > input {
    width: 85px;
}

span.DateTimeSlider span a.ui-slider-handle {
    font-size: 16px;
    width: 50px;
}

span.DateTimeSlider > input {
    margin-right: 15px;
}

JavaScript

/*
@name DateTimeSlider
@time 1338212986
@author [email protected]

@desc 
Create a date-picker and time slider based on jQueryUI without side-effects
to any event bindings or form submissions on existing input tags. Events 
bindings are contained per element, no hacky "select by ID" stuff.

When invoked on a tag such as:

    <input name="foo" val="2012-05-24 13:30">


We return this to the DOM:
    
    <input name="foo" val="2012-05-24 13:30" style="display:none">
    <span class="DateTimeSlider">
      <input class="hasDatepicker"> <!-- Note: jQueryUI thinks we need to do hacky
                                         ID things, it gives the input an ID... this 
                                         is... unfortunate to say the least.-->
      <button>13:30</button>
      <span style="display: none; ">
        <div></div>
      </span>
    </span>

To re-initialize the values, call $().DateTimeSlider("update", "2012-05-24 00:00"); 
(useful when making changes from other scripts, applies value to true picker also).

Other notes:
We do not anticipate our own need to change seconds via the slider, thus we have not 
provided for such.
*/

(function($) {
    $.fn.extend({
        //plugin name - animatemenu
        DateTimeSlide: function(options, newDateTime) {
            
            /*
            If the option to update is selected, apply this and return.
            */
            if (options === "update" && newDateTime !==undefined) {
                return this.each(function() {
                    var o = options;
                    var obj = $(this);
    
                    var DateTime = {
                        original: (newDateTime           || ""),
                        date: (newDateTime.split(" ")[0] || ""),
                        time: (newDateTime.split(" ")[1] || "")
                    };
                    

                    var input      = obj.next().find("input");
                    var timeButton =...