jQuery datepicker注意和maxdate

Question

我有jquery的这个日期时间选择器。 这是我的代码。 仅在月份和年份中添加了一些代码后，它不起作用。

问题是在第二个输入上选择之后。 第一个输入消失了，然后也消失了。 进行min和maxdate的验证（例如，第一个输入--- 5/2014-6/2014验证是在第二个输入上进行的，您无法选择5月前的几个月。

$(function() {
    $( "#dtp1" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function( selectedDate, dateText, inst ) {
            $( "#dtp2" ).datepicker( "option", "minDate", selectedDate );
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});

$(function() {
    $( "#dtp2" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function( selectedDate, dateText, inst  ) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
            $( "#dtp1" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

这是链接http://jsfiddle.net/wind_chime18/RUmCg/2/

Answer 1

我已经完成了对第二个日期选择器的验证，可以将其复制为第一个日期选择器。 检查链接js小提琴链接

// Php代码

<input type="text" id="dtp1">
<input type="text" id="dtp2">
 <!--<input type="text" id="dtp2" disabled>-->

// JavaScript代码

$(function () {
    $("#dtp1").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/yy',
        onClose: function (selectedDate, dateText, inst) {
             //$( "#dtp2" ).datepicker( "option", "minDate", selectedDate );
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
            //$("#dtp2").removeAttr('disabled');
        }
    });
});

$(function () {
    $("#dtp2").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/yy',
        onClose: function (selectedDate, dateText, inst) {
            if($("#dtp1").val() == "") {
                alert("Please select dpt1");
                return false;
            }
            else {

             var dtp1 = $("#dtp1").val();

            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            var d1, d2;
                d2 = (year *1 ) + ((month  *1)/ 12);
                d1 = (dtp1.split('/')[1] *1 ) + ((dtp1.split('/')[0] *1)/ 12);
                if(d1 > d2) {
                    alert("dpt1 is greater then dpt2");
                    return false;
                }
                else {
                 $(this).datepicker('setDate', new Date(year, month, 1));
                }
            }
        }
    });
});