JSFiddle - React, Tailwind, and code Playground

by chloe_12

HTML

<div class="booking_widget">
    <div class="availability_check_head">
         <h3>Check for Availability</h3>

    </div>
    <div class="arrival_and_departure_title">
        <div class="col-sm-6">
            <div class="arrival_title">
                 <h4>Arrival:</h4> 
            </div>
        </div>
        <div class="col-sm-6">
            <div class="departure_title">
                 <h4>Departure:</h4>

            </div>
        </div>
    </div>
    <div class="booking_cal">
        <div class="col-sm-6">
            <div class="arrive">
                <div class="clickable-text daterange__picker daterange__picker--start_date">
                    <div class="arrive_date_picker">
                        <div class="arrive_month_change"> <span class="Jquery_month"></span>

                        </div>
                        <div class="arrive_date_change"> <span class="Jquery_day">
                     <input type="text" name="start_date" class="start">
                     </span>

                        </div>
                        <div class="next_arrow_arrive"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="depart">
                <div class="clickable-text daterange__picker daterange__picker--end_date">
                    <div class="depart_date_picker">
                        <div class="depart_month_change"> <span class="Jquery_month"></span>

                        </div>
                        <div class="depart_date_change"> <span class="Jquery_day">
                   <input type="text" name="end_date" class="leave">
                   </span>

                        </div>
                        <div class="next_arrow_depart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="number_of_adults">
        <div class="col-sm-8">
            <div...

JavaScript

$(document.body).on('click', '.daterange__picker', function (e) {
     $(e.currentTarget).find('input').datepicker('show');

 });

 $('input.start').datepicker({

     onSelect: function (dateText) {
         alert(dateText);
         var date = $(this).datepicker('getDate'),
             day = date.getDate(),
             month = date.getMonth() + 1,
             year = date.getFullYear();


         var parent_div = $(this).closest(".clickable-text");
         console.log(parent_div);
         $(".Jquery_day", parent_div).html(day);
         $(".Jquery_month", parent_div).html(month);
         $(".Jquery_year", parent_div).html(year);
         $(parent_div).addClass("is_selected");

     },
     dateFormat: "M d y"
 });

 $('input.start').datepicker();
 $('input.start').datepicker("setDate", new Date());


 $('input.leave').datepicker({

     onSelect: function (dateText) {
         alert(dateText);
         var date = $(this).datepicker('getDate'),
             day = date.getDate(),
             month = date.getMonth() + 1,
             year = date.getFullYear();


         var parent_div = $(this).closest(".clickable-text");
         console.log(parent_div);
         $(".Jquery_day", parent_div).html(day);
         $(".Jquery_month", parent_div).html(month);
         $(".Jquery_year", parent_div).html(year);
         $(parent_div).addClass("is_selected");

     },
     dateFormat: "M d y"
 });

 $('input.leave').datepicker();
 $('input.leave').datepicker("setDate", new Date());


 $("#adults option:selected").text();