Aarti Gupta

Aarti Gupta

  • 839
  • 965
  • 12.7k

Jquery datepicker inside modal popup doesn't work for all resolutions.

Jan 7 2025 12:59 PM
 $('.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');
                }
            },
        });

Hi,

I have a jquery datepicker inside 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. 

I am using asp.net mvc

this is my working code but it doesn't work for all resolutions as i have used static screen width to fix the issue.

 


Answers (1)