JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<div id="status">Selected date: none</div>
<button id="btn">Select a date before clicking me</button>
<br />
<input type="text" id="dp" />
JavaScript
$(function() {
$("#dp").datepicker({
onSelect: function(currDate) {
$("#status").html("Selected date: " + currDate);
}
});
$("#btn").click(function() {
$(this).html("Increment date by one day and fire onSelect");
/* Increment the date by one day */
var currentDate = $("#dp").datepicker("getDate");
var newDate = new Date(currentDate);
newDate.setDate( currentDate.getDate() + 1);
$("#dp").datepicker("setDate", newDate);
/* This is your function */
var onSelectFunction = $("#dp").datepicker("option","onSelect");
/* How your datepicker instance is set to format its date on select */
var format = $("#dp").datepicker( "option", "dateFormat" );
/* Make the "currDate" parameter as jQuery would do on select */
var currDate = $.datepicker.formatDate(format,newDate)
/* Fire the callback */
onSelectFunction( currDate );
});
});