JSFiddle - React, Tailwind, and code Playground

by slicedtoad

HTML

<script src="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.css">
<script src="https://rawgit.com/jonthornton/Datepair.js/master/dist/datepair.js"></script>
<script src="https://rawgit.com/jonthornton/Datepair.js/master/dist/jquery.datepair.js"></script>
<script src="https://rawgit.com/timrwood/moment/master/moment.js"></script>
<div id="div"></div>

CSS

div, label, input {
    float:left;
    clear:both;
}

JavaScript

var s =
    "<form class='datetime'>" +
    "<fieldset>" +
"<div id='Datepair'>" +
    "<label for='StartDate'>Start</label>" +
    "<div type='text' placeholder='Start Date' id='StartDate' class='start date'></div>" +
    "<label for='StartTime'>Start Time</label>" +
    "<input type='text' id='StartTime' class='start time'></input>" +
    "<label for='EndDate'>End</label>" +
    "<input type='text' placeholder='End Date' id='EndDate' class='end date'></input>" +
    "<label for='EndTime'>End Time</label>" +
    "<input type='text' id='EndTime' class='end time'></input>" +
    "</div>" +
    "<button type='button' id='toggle'>toggle</button>"
    "</fieldset>" +
    "</form>";
var $node = $("<div id='node'></div>");
$node.html(s);
$node.find(".date").datepicker({
    'format': "dd-mm-yy",
        'autoclose': true
});
$node.find(".time").timepicker({
    'showDuration': true,
        'timeFormat': 'g:ia'
});
$node.find("#Datepair").datepair({
    parseDate: function (input) {
        return $(input).datepicker('getDate');
    },
    updateDate: function (input, dateObj) {
        $(input).datepicker('setDate', dateObj);
        console.log(input);
    }
});

$node.appendTo('#div');

$node.find("#Datepair").on('rangeSelected', function () {
    console.log('Valid range selected');
    console.log($("#StartDate").val() + " " + $("#StartTime").val());
}).on('rangeIncomplete', function () {
    console.log('Incomplete range');
}).on('rangeError', function () {
    console.log('Invalid range');
});

var toggle = function(){
    //toggle #StartDate's inline-ness
};
$node.on('click','#toggle',toggle);