Jquery datepicker注意到和maxdate

时间:2014-05-15 07:07:36

标签: javascript jquery datepicker

我有来自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/

1 个答案:

答案 0 :(得分:1)

我已经完成了对第二个日期选择器的验证,您可以将其复制到第一个日期选择器。 检查链接 js fiddle link

// Php代码

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