datepicker requires refresh on multiple pages - jquery-ui

Question

I have a datepicker form included on each page of a financial accounting web site. The date picker is designed to allow users to select a range of dates for the data that they want displayed.
Unfortunately, the only way to get the calendars to appear when the text field has focus, as a user navigates from page to page, is for a hard refresh (Ctrl-R). Not the optimum.
here's the form:
<li data-data-theme='b' >
<label for="from">From</label>
<input type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</li>
And here's the jquery:
$(function() {
console.log("hello world 2");
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#to" ).datepicker();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker();
}
});
});
}
$(document).ready(function(){
console.log("hello world");
$(function() {
console.log("hello world 2");
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
showOn: 'button',
buttonImage: 'images/datepicker_icon.png',
buttonImageOnly: true,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker();
}
});
});
});
I have tried changing the form to include reference to a class: eg:
<li data-data-theme='b' >
<label for="from">From</label>
<input class='datepicker' type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label for="to">to</label>
<input class='datepicker' type="text" id="to" name="to"/>
</li>
and then referencing that in the jquery function thus:
$(function() {
console.log("hello world 2");
$( ".datepicker" ).datepicker({
...
onSelect: function( selectedDate ) {
$( ".datepicker" ).datepicker();
}
});
});
but all to no avail.
So, here's the question: how do I have the datepicker calendar appear when a user navigates to a new page on the web site?

Answer 1

would you like to open datepicker by default..when user comes to these pages. if yes you have to configure display inline property of datepicker see example Example datepicker display inline
$(function() {
$('#datepicker').datepicker({altField: '#date1'});
});