JSFiddle - React, Tailwind, and code Playground

by StriplingWarrior

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div class="date-range-widget">
    <h2>Create a date range</h2>
    
    <div>
        <label for="startDate">Start:</label>
        <input id="startDate" class="date start-date" name="startDate" type="text" />
    </div>
    
    <div>
        <label for="endDate">End:</label>
        <input id="endDate" class="date end-date" name="endDate" type="text" />
    </div>
    
    <p class="output"></p>
    
    <button class="create-date-range">Create</button>
</div>

CSS

label { color: #555;}

JavaScript

$(function () {
    $("input.date").datepicker();

    $("div.date-range-widget").each(function(){
        var $t = $(this);
        var startBox = $t.find("input.start-date");
        var endBox = $t.find("input.end-date");
        var output = $t.find("p.output");
        $t.find("button.create-date-range").click(function () {
            output.html(startBox.val() + " to " + endBox.val());
        });
    });
    
});