JSFiddle - React, Tailwind, and code Playground

by Cupidvogel

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/dark-hive/jquery-ui.css">
<div id='datecontainer'>
        <div class='dateheaders fromheader'>
            <span class='spandate' id="spandate1"><span class = 'oof' id = 'oof1'>Select a date</span><span class = 'arrow' id = 'datearrow1'></span></span>
            <div id='diva1'></div>
        </div>
        <div class='dateheaders toheader' >
            <span class='spandate' id="spandate2"><span class = 'oof' id = 'oof2'>Select a date</span><span class = 'arrow' id = 'datearrow2'></span></span>
            <div id='diva2'></div>
        </div>
        
        
    </div>
<input id='boombada' type="text" size="23" value="" />

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; position: absolute; height: 100%; width: 100%; display: inline-block; border-radius: 5px;}
    

    div#diva1 {  width: 190px; position: relative; top: 25px; left: -1px;display: none; z-index: 10; outline: none;}
    div#diva2 {  width: 190px; position: relative; top: 25px; left: -1px; display: none; z-index: 10; outline: none;}
    #datecontainer { position: relative; width: 400px; height: 30px; top: 60px; left: 40px; }
    .oof { font-weight:bold; position: relative; top: 2.5px; left: 4px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-weight: bold; color: white; font-size: 0.8em; }
    span.arrow { display: inline-block;  border-top: 5px solid white; width: 0px; height: 0px; border-bottom: 5px solid transparent; border-right: 5px solid transparent; border-left: 5px solid transparent;  position: absolute; right: 5px; top: 12px; }

JavaScript

$(function() {
    
fromclicked = 0; toclicked = 0;

$("body").live('click',function(e) { if (!($(e.target).is('.dateheaders *') || $(e.target).is('.ui-datepicker-inline *') || $(e.target).is('.dateheaders') || $(e.target).is('.ui-datepicker-inline'))) { fromclicked = 0; toclicked = 0; $("#datearrow1").css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:'12px'}); $("#datearrow2").css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:'12px'});
$("[id^=diva]").slideUp(300);  }});

$("#spandate1,#spandate2").click(function(){
    if (this.id === 'spandate1') {
        $("#diva2").stop(true,true).slideUp();
        toclicked = 0;
        $("#datearrow2").css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:'12px'});
        if (!fromclicked) {
        $("#datearrow1").css({borderTop:'5px solid transparent',borderBottom:'5px solid white',top:'6px'});
        $("#diva1").stop(true,true).slideDown();
        fromclicked = 1;
        }
        else { $("#diva1").stop(true,true).slideUp(); fromclicked = 0;
        $("#datearrow1").css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:'12px'});
        }
    }
    else {
    $("#diva1").stop(true,true).slideUp();
    fromclicked = 0;
    $("#datearrow1").css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:'12px'});
        if (!toclicked) {
        $("#datearrow2").css({borderTop:'5px solid transparent',borderBottom:'5px solid white',top:'6px'});
        $("#diva2").stop(true,true).slideDown();
        toclicked = 1;
        }
        else { $("#diva2").stop(true,true).slideUp(); toclicked = 0;
         $("#datearrow2").css({borderTop:'5px solid white',borderBottom:'5px solid transparent',top:'12px'});
        }
        
    }
});
$("#diva1").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    maxDate: "+0D",
    onSelect: function(selectedDate) {
       ...