jQuery datepicker注意和maxdate

Question

I have this date time picker from jquery . here is my code. it's not working after adding some code for month and year only.

the problem is after selecting on the 2nd input. the first input disappears.. then also. make the validation of min and maxdate (eg first input --- 5/2014 - 6/2014 the validation there is on the second input you can't select months before month of may.

$(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 );
        }
    });
});

here is the link http://jsfiddle.net/wind_chime18/RUmCg/2/

Answer 1

I have done your validation for 2nd date picker you can copy it for 1st datepicker. Check link js fiddle link

//Php code

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

//Javascript COde

$(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));
                }
            }
        }
    });
});