Datepicker drop downs + JQM Popup hell

by Mario Bianchi

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<div data-role="page">
    <div id="dialog-form" title="test" style="display:none">
        <form>
            <fieldset>
                <p>Date1:
                    <input type="text" class="mydatepicker" />
                </p>
            </fieldset>
        </form>
    </div>
    <div id="dialog-popup" data-role="popup" data-dismissible="true" style="min-height: 200px; max-width: 300px;">
        <form>
            <fieldset>
                <p>Date2:
                    <input type="text" class="mydatepicker" />
                </p>
            </fieldset>
        </form>
    </div>
<!--    <button id="testDialog">Open Dialog</button> -->
    <button id="testPopup">Open Popup</button>
</div>

JavaScript

$(function () {
    // this doesn't apply to JQM, only to JQuery UI dialogs
    /*
    $.widget("ui.dialog", $.ui.dialog, {
        _allowInteraction: function (event) {
            return true;
            //            return !!$( event.target ).is( ".select2-input" ) || this._super( event );
        }
    });
    */

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true
    });

    $("#testDialog")
        .button()
        .click(function () {
        $("#dialog-form").dialog("open");
    });

    $("#testPopup")
        .button()
        .click(function () {
        $("#dialog-popup").popup("open");
    });


    $(".mydatepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        //showOn: "button",
        // buttonImage: "../Images/calendar.gif",
        // buttonImageOnly: true,
        constrainInput: true,
        duration: '',
        altTimeField: '',
        time24h: false,
        onClose: function () {
            console.log('closed');
        },
        onSelect: function () {
            console.log('selected');
        }
        //    beforeShow: function (i, e) { $('#ui-datepicker-div').maxZIndex(); }
    });

    // move datepicker
    /*
    $('#ui-datepicker-div').ready(function () {
        var popup = document.getElementById('dialog-popup');
        var datePicker = document.getElementById('ui-datepicker-div');
        popup.appendChild(datePicker);
    });
    */
});