Question

我有这个页面有多个日历，我已经为每个日历分配了不同的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>

Answer 1

使用 jquery ui datepicker Magnific popup 的代码 （启用changemonth和changeyear）

// 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/

希望这有助于某人！

jQuery datepicker将不会显示

1 个答案: