jquery datepicker日历位置显示在屏幕外答案

【问题标题】：jquery datepicker calendar position is showing off screenjquery datepicker日历位置显示在屏幕外
【发布时间】：2021-12-28 19:05:08
【问题描述】：

我正在使用如下的日期选择器。我注意到日历是在屏幕外打开的。当我取消缩放页面时，我可以看到它在屏幕的非常底部打开。我试过 z-index 但它不起作用。

请提前告知和感谢。

//css
datepicker_carry_forward_date{

      background-color: yellow;
      z-index: 999999;

}


//html
<input type = "text" id = "datepicker_carry_forward_date" autocomplete="off">


//js

$('#datepicker_carry_forward_date').datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: false,
            changeMonth: false,
            minDate: $scope.minimundate,
            maxDate: $scope.max_days,
            beforeShowDay: function(date) {
    
                show = true;
              
              var holidays = ['06/16/2020','06/23/2020'];
    
                for (var i = 0; i < holidays.length; i++) {
    
                    var holiday = new Date(holidays[i]);
                    holiday.setHours(00);
                    holiday.setMinutes(00);
                    holiday.setSeconds(00);
                    if (holiday.toString() == date.toString()) { show = false; break;}//No Holidays
                }
              
              if(date.getDay() == 0){ show = false; }
    
                var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
    
                return display;
    
            },
             onSelect: function(dateText, inst) { 
                
                var date = $(this).datepicker({ dateFormat: 'yy-mm-dd' }).val();
                console.log(date);
                
                
                
            }
    });
    [![when I unzoom screen I can see datepicker at bottom][1]][1]

【问题讨论】：

可能与您正在使用的其他 css 冲突。创建一个可运行的 minimal reproducible example 来演示问题

标签： javascript html css datepicker jquery-ui-datepicker

【解决方案1】：

您在 html css 和 js 中有 sintaksis 错误...我尝试修复您的代码。我不知道变量 $scope 中有什么，但我的变体有效。

$('#datepicker_carry_forward_date').datepicker({
  dateFormat: "dd/mm/yy",
  changeYear: false,
  changeMonth: false,
  minDate: 10, /// changed
  maxDate: 2, /// changed
  beforeShowDay: function(date) {

    show = true;

    var holidays = ['06/16/2020', '06/23/2020'];

    for (var i = 0; i < holidays.length; i++) {

      var holiday = new Date(holidays[i]);
      holiday.setHours("00");
      holiday.setMinutes("00");
      holiday.setSeconds("00");
      if (holiday.toString() == date.toString()) {
        show = false;
        break;
      } //No Holidays
    }

    if (date.getDay() == 0) {
      show = false;
    }

    var display = [show, '', (show) ? '' : 'No Weekends or Holidays']; //With Fancy hover tooltip!

    return display;

  },
  onSelect: function(dateText, inst) {

    var date = $(this).datepicker({
      dateFormat: 'yy-mm-dd'
    }).val();
    console.log(date);



  }
});

#datepicker_carry_forward_date {
  background-color: yellow;
  z-index: 999999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<input type="text" id="datepicker_carry_forward_date" autocomplete="off">

【讨论】：