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">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="inputDiv">
    <h3>Select a Date</h3>  
    <div class="dateDiv">
        <input id="sampleDateField1" type="text" class="datepicker" />
        <br/><span class="dateFormatStr">(mm/dd/yyyy)</span>
    </div>   
    <div class="dateDiv">
        <input type="text" id="monthField"></input> /
        <input type="text" id="dayField"></input> /
        <input type="text" id="yearField"></input>
        <span id="sampleDateField2"><i class='fa fa-calendar' title="select"></i></span>
        <br/><span class="dateFormatStr">(mm/dd/yyyy)</span>
    </div> 
    
    <h3>Selected Date : <span id="selectedDate"></span>  </h3>
    
</div>

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;
}

JavaScript

$( "#sampleDateField1" ).datepicker({
                showOn: "button",
                buttonText: "<i class='fa fa-calendar'></i>",
                showAnim:"",
                defaultDate: '',
                dateFormat: "mm/dd/yy",
                onSelect: function(date) {
                    $('#selectedDate').html(date);
                }
});

$("#sampleDateField2").unbind().bind("click",function(){
    $('#sampleDateField2 .ui-datepicker').show();
    $( "#sampleDateField2" ).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').getYear();  
                    $('#selectedDate').html(date);
                    $('#dayField').val(day);
                    $('#monthField').val(month);
                    $('#yearField').val(year);
                    $('#sampleDateField2 .ui-datepicker').hide();
                }
    });    
});