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-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 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("reload"); (useful when making changes from other scripts).

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) {
            
            var defaults = {
                defaultTime: "00:00",
                datepicker: {
                    dateFormat : "yy-mm-dd",
                },
                slider: {
                    step : 30,
                    max  : 1439,
                    min  : 0,
                    value: 0
                }
            };
            options = $.extend(defaults, options);
            
            return this.each(function() {
                var o = options;
                var obj = $(this);
                var items = $("li", obj);

                var DateTime = {
                    original: (obj.val() || ""),
                    date: (obj.val().split(" ")[0] || ""),
                    time: (obj.val().split(" ")[1]...