Reputation: 317
I am stuck on a strange issue, I have a jQuery datepicker inside a Bootstrap modal popup. It works fine for some browser resolution, but not for all. This is how I resolved it, but I want some more concrete way so that it will work for all machines and resolution.
This is my working code but it doesn't work for all resolutions as I have used static screen width to fix the issue.
$('.fetched-date input').datepicker({
dateFormat: 'dd/mm/yy',
changeYear: true,
changeMonth: true,
numberOfMonths: 1,
buttonImageOnly: true,
minDate: 0, // Today's date
maxDate: '+6m', // 6 months from today
duration: 'fast',
container: "#divSalaryDetailsClawbackPayheadPopup",
onSelect: function () {
// Enable the ddlFreqType dropdown when a date is selected
$("#ddlFreqType").prop("disabled", false);
},
beforeShow: function () {
debugger;
setTimeout(function () {
var datepicker = $('#ui-datepicker-div');
if ($(window).width() > 1364) {
datepicker.css('position', 'absolute');
} else {
datepicker.css('position', 'fixed');
}
if ($(window).width() == 1232)
{
datepicker.css('position', 'absolute');
}
if ($(window).width() == 1812) {
datepicker.css('position', 'fixed');
}
}, 0);
},onChangeMonthYear: function (year, month, inst) {
// Enforce the position again when the month or year changes
var datepicker = $('#ui-datepicker-div');
if ($(window).width() > 1366) {
datepicker.css('position', 'absolute');
} else {
datepicker.css('position', 'fixed');
}
},
});
Upvotes: 0
Views: 25