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">
<pre>
todo: 
 - Remote update call
</pre>
<pre id="out">Foo
foo
foo
foo
</pre>
<br>
<input  id="a" value="2012-05-24 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 1338305002
@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">z


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.

Room for refactoring here exists, but "it works as is".
Future thinking, it would be better to create an object 
inside of the picker to deal with all this, it ended up being
larger than I had expected.

A partial refactor can be found at http://jsfiddle.net/BDG/dRVV9/

*/

(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           || ""),
            ...