JSFiddle - React, Tailwind, and code Playground

by Cupidvogel

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
<body>
    <div id = 'datecontainer'>
    <div class = 'dateheaders fromheader'>
    <span class = 'spandate'>Select a date</span>

    </div>
    <div class = 'dateheaders toheader'>
    <span class = 'spandate'>Select a date</span>
 
    </div>
    <div id = 'diva1'></div>
    <div id = 'diva2'></div>
    </div>
  
    <input id = 'boombada' type = "text" size = "23" value = "" /
    
    </body>

CSS

.dateheaders { background: black; width: 120px; height: 28px; position: absolute; top: 0px; left: 33px; border-radius: 5px; cursor: pointer; display: inline-block; z-index: 55; }
    .toheader { left: 216px }
    .spandate { color: white; }
    

    div#diva1 {  width: 190px; position: absolute;  display: none; z-index: 10; outline: none;}
    div#diva2 {  width: 190px; position: absolute;  display: none; z-index: 10; outline: none;}
    #datecontainer { position: relative; width: 400px; height: 30px; background: red; top: 60px; left: 40px; }

JavaScript

$(function() {
        
        fromclicked = 0; toclicked = 0;
    
    
    
            $( "#diva1" ).datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd/mm/yy',
                maxDate: "+0D",
                onSelect: function( selectedDate ) {
                fromclicked = 0;
                    $( "#diva2" ).datepicker( "option", "minDate", selectedDate );
                    $("div.fromheader").css({borderRadius:'5px'}).find('span').text(selectedDate);
                    $("#diva1").slideUp(300);
                }
            });
            $( "#diva2" ).datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd/mm/yy',
                maxDate: "+0D",
                onSelect: function( selectedDate ) {
                    toclicked = 0;
                    $( "#diva1" ).datepicker( "option", "maxDate", selectedDate );
                    $("div.toheader").css({borderRadius:'5px'}).find('span').text(selectedDate);
                    $("#diva2").slideUp(300);
                }
            });
            $("body").css({fontSize:'16px'});
            $("div.ui-datepicker-inline").css({fontSize:'62.5%',left:'-50px',borderRadius: '0px 10px 10px 10px'});
            
    $(".dateheaders").click(function() {
    $top = $(this).offset().top + $(this).height()-1;
    $left = $(this).offset().left;
    if ($(this).hasClass('fromheader')) {
    $("div#diva2").slideUp(300,function() { toclicked = 0; });
    $(".toheader").css({borderRadius:'5px'});
    if (!fromclicked) {
    fromclicked = 1;
    $("div#diva1").appendTo("body").css({display:'block',top:$top,left:$left}).slideUp(0).slideDown(300,function() { $(this).focus(); });
    
    $("div.fromheader").css({borderRadius:'5px 5px 0px 0px'}); }
    else {
    $("div#diva1").slideUp(300);
    $("div.fromheader").css({borderRadius:'5px'});
    fromclicked = 0;
     }
    }
    else {
   ...