When I utilize the jquery ui datepicker (range) and open my datepicker, if I scroll down the page, the calendar disappears. This issue seems to only occur on Safari browsers with mobile devices.
Has anyone else experienced this problem?
Would someone be able to review my code?
function datePicker(){
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#checkin,.checkin" )
.datepicker({
numberOfMonths: 2,
firstDay: 1,
minDate: 0,
beforeShow:function(){
$(this).datepicker("widget").addClass("main-datepicker");
}
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#checkout,.checkout" ).datepicker({
numberOfMonths: 2,
firstDay: 1,
minDate: 0,
beforeShow:function(){
$(this).datepicker("widget").addClass("main-datepicker");
}
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
}
datePicker();<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
From : <input type="text" class="checkin">
To: <input type="text" class="checkout">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>