JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<script src="http://keith-wood.name/js/jquery.datepick.js"></script>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.datepick.css">
<h2>Select date range using datepick.js</h2>

<p>
    <span class="demoLabel">Date range:</span>
    <input type="text" id="rangePicker" size="20" />
</p>

<p id="selectedDates">
</p>

<h3><a href="http://yassershaikh.com/select-date-range-using-jquery-datepicker-js-and-datepick-js">Back to article</a></h3>

JavaScript

$(function(){
    $('#rangePicker').datepick({ 
        rangeSelect: true,
        onClose:function(dates) {        
            setSelectedDateRange(dates);
        }
    });
    
    function setSelectedDateRange(dates){
        var startDate = "start date = " + dates[0];
        var endDate = "end date = " + dates[1];
        
        $("#selectedDates").html(startDate + "<br/>" + endDate);
    }
    
     // in case of inline datepicker
    // use this to set date range 
    // $("#rangePicker").datepick("setDate", "04/26/2013", "04/30/2013");
});