jQuery datepicker 不会显示答案

【问题标题】：jQuery datepicker won't displayjQuery datepicker 不会显示
【发布时间】：2015-10-28 06:11:51
【问题描述】：

我的这个页面有多个日历，我为每个日历分配了不同的 ID，并且我有一个类似的页面，但是当我单击链接打开弹出窗口时，这个页面没有问题，弹出窗口中包含的日历仍然有效和另一个相比很好。唯一的区别是另一个页面使用了一个放大的弹出窗口[日期选择器不起作用的页面]。我不知道弹出窗口是否与它有关，因为每当我删除主页中的日历时，弹出窗口上的日历都可以正常工作。

这是在弹出窗口中调用的表单中包含的代码

<link href="css/jquery-ui.css" rel="stylesheet">    
<script src="js/jquery-ui.js"></script>
<script language="javascript" type="text/javascript">
        var $jc = jQuery.noConflict();
        //$j("#datepicker").datepicker();

        $jc(document).ready(function(){             
            var dateToday = new Date(); 
             var dates = $jc("#txtDeparture").datepicker({
            dateFormat: 'yy-mm-dd',
            //showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            minDate: dateToday,
            onSelect: function(selectedDate){
                var option = this.id == "txtDeparture" ? "minDate" : "minDate",
                instance = $jc(this).data("datepicker"),
                date = $jc.datepicker.parseDate(instance.settings.dateFormat || $jc.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });     
        });     
</script>

这是链接使用的代码

<link rel="stylesheet" href="js/magnific/magnific-popup.css"> 
<!--<script src="js/magnific/jquery.js"></script> -->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script src="js/magnific/jquery.magnific-popup.js"></script>    
     <script language="javascript" type="text/javascript">
    function showNewBookPopup(rid,sdate){
            $('#content_container'+rid).html("<br/><br/><p align='center'><img src='images/miniloader2.gif'/></p>");
            qString = "roomid="+rid+"&date="+sdate;
            $.post("booking_calendar/calendar_book_1.php",qString, function(response){
                if(response!=""){
                $('#content_container'+rid).html(response);
              }
            }); 

    }
    </script>

【问题讨论】：

我已经尝试删除 hasDatepicker 类并且不使用 magnific-popup 仍然没有运气。
添加了这个 jQuery('#ui-datepicker-div').remove();到弹出窗口中的日期选择器，它可以工作，但我现在有一个新问题。主页中的日期选择器需要在点击弹出窗口后刷新。
我刚刚在弹出窗口的按钮中添加了一个功能，该功能会在页面关闭时重新加载页面。如果你们有更好的解决方案，那将有所帮助。谢谢！！！

标签： javascript jquery jquery-ui datepicker popup

【解决方案1】：

此代码用于 Magnific popup 与 jquery ui datepicker （更改月份和更改年份已启用）

// Added to make calendar drop downs work properly
$.magnificPopup.instance._onFocusIn = function(e) {

    if( $(e.target).hasClass('ui-datepicker-month') ) {
        return true;
    }
    if( $(e.target).hasClass('ui-datepicker-year') ) {
        return true;
    }
    $.magnificPopup.proto._onFocusIn.call(this,e);
};

使用此小提琴中的以下脚本修复了此问题。

http://jsfiddle.net/sh1mspg2/

希望这对某人有所帮助！

【讨论】：