jQuery datepicker won't display

Question

I have this page that has multiple calendars and I have assigned each of them with different IDs and I have a similar page but this one has no problem whenever I click a link to open a popup the calendar included in the popup still works fine compared to the other one. The only difference is that the other page uses a magnific popup[the page that has a datepicker not working]. I don't know if the popup has something to do with it cause whenever I remove the calendar in main page the one on the popup works fine.

This is the code included in the form being called inside the popup

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

Here's the code that's used by the link

<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

This code for Magnific popup with jquery ui datepicker (changemonth and changeyear is enabled)

// 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);
};

Fixed this issue using the following script in this fiddle.

http://jsfiddle.net/sh1mspg2/

Hope this helps someone!