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

Hello Arti,

You can use this dynamic way to handle pop and calender size and width,

            $('.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 () {
                    adjustDatepickerPosition();
                },
                onChangeMonthYear: function () {
                    adjustDatepickerPosition();
                }
            });

            // Function to dynamically adjust the datepicker position

            function adjustDatepickerPosition() {
                setTimeout(function () {
                    const datepicker = $('#ui-datepicker-div');
                    const windowWidth = $(window).width();
                    const inputOffset = $('.fetched-date input').offset(); 
                    const inputWidth = $('.fetched-date input').outerWidth(); 
                    const datepickerWidth = datepicker.outerWidth(); 
                    
                    let position = 'absolute';

                    // Dynamically calculate and set the position

                    if (inputOffset.left + datepickerWidth > windowWidth) {
                        // If the datepicker overflows, adjust it
                        position = 'fixed';
                        datepicker.css({
                            top: inputOffset.top + $('.fetched-date input').outerHeight(),
                            left: windowWidth - datepickerWidth - 20 
                        });
                    } else {
                        // Normal positioning
                        datepicker.css({
                            top: inputOffset.top + $('.fetched-date input').outerHeight(),
                            left: inputOffset.left
                        });
                    }

                    
                    datepicker.css('position', position);
                }, 0);
            }