Bhavna
Bhavna

Reputation: 317

ASP.NET MVC : jQuery datepicker inside bootstrap modal

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

Answers (0)

Related Questions