JSFiddle - React, Tailwind, and code Playground

by Cupidvogel

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/black-tie/jquery-ui.css">
<div id="first_selector">
    <div class="dp"></div>
    <span>Select a date</span>
</div>
<div id="second_selector">
    <div class="dp"></div>
    <span>Select a date</span>
</div>

CSS

#first_selector, #second_selector
{
    background-color: black;
    border-radius: 10px;
    border: 1px solid black;
    width: 200px;
    height: 30px;
    margin: 20px;
    float: left;
    color: white;
    text-align: center;
}

.dp
{
    position: absolute;
    border: 1px solid #999999;
    top: 60px;
}

JavaScript

$(document).ready(function()
{
    $('#first_selector .dp').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy',
        maxDate: "+0D",
        onselect: function(selectedDate)
        {
            $('#first_selector span').html(selectedDate);
        }
    });
    
    $('#second_selector .dp').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy',
        maxDate: "+0D",
        onselect: function(selectedDate)
        {
            $('#second_selector span').html(selectedDate);
        }
    });
    
    $('#first_selector span').click(function()
    {
        if ($('#first_selector .dp').is(':visible'))
        {
            $('#first_selector .dp').hide();
        }
        else
        {
            $('#first_selector .dp').show();
        }
    });
    
    $('#second_selector span').click(function()
    {
        $('#second_selector .dp ').toggle();
    });
    
    // Couldn't hide these buggers with CSS for some reason.
    $('#first_selector .dp ').hide();
    $('#second_selector .dp').hide();
});