JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<div id="inputDiv">
    <h3>Select a Date</h3>  
     
    <div id="dateDiv" class="dateDiv">
        <input type="text" id="monthField"></input> /
        <input type="text" id="dayField"></input> /
        <input type="text" id="yearField"></input>
        <a id="date1Link" onClick="openCalendar('dateDiv')" class="datepickerlink"><i class='fa fa-calendar' title="select"></i></a>
        <br/><span class="dateFormatStr">(mm/dd/yyyy)</span>
    </div> 
    
    <h3>Selected Date : <span id="selectedDate"></span>  </h3>
    
</div>
<script>
    function openCalendar(dateDivElement){   
        $('#' + dateDivElement).datepicker({
                showOn: "button",
                buttonText: "<i class='fa fa-calendar'></i>",
                showAnim:"",
                defaultDate: '',
                dateFormat: "mm/dd/yy",
                onSelect: function(date, eventField) {
                    //eventField returns the field on which datepicker is applied.
                    var day = $(this).datepicker('getDate').getDate();  
                    var month = $(this).datepicker('getDate').getMonth() + 1;  
                    var year = $(this).datepicker('getDate').getUTCFullYear();  
                    $('#selectedDate').html(date);
                    $('#' + dateDivElement +  ' #dayField').val(day);
                    $('#' + dateDivElement +  ' #monthField').val(month);
                    $('#' + dateDivElement +  ' #yearField').val(year); 
                    $('#' + dateDivElement +  ' .ui-datepicker').hide();
                }
        });  
    }
</script>

CSS

.datepicker{
    width : 80px;    
}

#inputDiv {
    padding-left : 5px;
    float : left;   
    width : 100%;
    height : 300px;
    background-color : #DFEFDD;
}
#output {    
    float : right;
    padding-left : 5px;
    border-left : 1px solid GRAY;
    height : 300px;
    background-color : #DFEFFF;
}
#dayField{
    width : 20px;
}
#monthField{
    width : 20px;
}
#yearField{
    width : 40px;
}

#caltype1 {
   width : 100px; 
}

.dateDiv { 
    margin : 20px;   
}
.dateFormatStr {
        margin-left : 20px;
}