JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/smoothness/jquery-ui.css">
<input type="text" class="fromDatePicker"/>
<input type="text" id="toDate"/>
<br />
<input type="text" id="fromDateFormatted" />
CSS
button.ui-button-icon-only {
width: 1em;
margin-left: 0.5em;
}
JavaScript
$('#toDate').datepicker({dateFormat: 'dd/mm/yy'});
$( ".fromDatePicker" ).datepicker({
defaultDate: "+1w",
dateFormat: 'dd/mm/yy',
altFormat: 'yymmdd',
altField: "#fromDateFormatted",
numberOfMonths: 2,
showOn: "both",
//buttonImage: "images/calender_icon_a1.jpg",
//buttonText: "open calendar",
//buttonImageOnly: true,
onSelect: function( selectedDate ) {
alert (minDate);
$('#toDate').datepicker( "option", "minDate", selectedDate );
setTimeout(function() { $('#toDate').datepicker("show") }, 50);
//$('#toDate').focus(); //commented cause it's not working
}
}).next('button').text('').button({
icons: {
primary: 'ui-icon-calendar'
},
text: false
});