Question

我有两个日期选择器#plecare和#sosire。我已设法为两个日期选择器设置最小日期，但我需要#sosire始终＆gt; #plecare HTML表单是：

<div class="datepicker-wrap">     
    <input id="plecare" type="text" name="plecare" class="input-text full-width" placeholder="aa/ll/zz" />
</div>

和

<div class="datepicker-wrap">
     <input id="sosire" type="text" name="sosire" class="input-text full-width" placeholder="aa/ll/zz" />
</div>

我的主题脚本中的jQuery片段是：

// datepicker
    tjq('.datepicker-wrap input').each(function() {
        var minDate = tjq(this).data("min-date");
        if (typeof minDate == "undefined") {
            minDate = +1;
                    }
   tjq(this).datepicker({
        showOn: 'button',
        buttonImage: 'images/icon/blank.png',
        buttonText: '',
        buttonImageOnly: true,
        changeYear: false,
        /*showOtherMonths: true,*/
        minDate: minDate,
        dateFormat: "yy-mm-dd",
        closeText: 'Inchide',
        prevText: '&#xAB; Luna precedenta',
        nextText: 'Luna urmatoare &#xBB;',
        currentText: 'Azi',
        monthNames: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie',
        'Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
        monthNamesShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun',
        'Iul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        dayNames: ['Duminica', 'Luni', 'Marti', 'Miercuri', 'Joi', 'Vineri', 'Sambata'],
        dayNamesShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sam'],
        dayNamesMin: ['Du','Lu','Ma','Mi','Jo','Vi','Sa'],
        weekHeader: 'Sapt',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
            beforeShow: function(input, inst) {
                var themeClass = tjq(input).parent().attr("class").replace("datepicker-wrap", "");
                tjq('#ui-datepicker-div').attr("class", "");
                tjq('#ui-datepicker-div').addClass("ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all");
                tjq('#ui-datepicker-div').addClass(themeClass);
            }
        });
    });

如何完成上述操作，以使#sosire的最短日期始终大于#plecare

Answer 1

我理解你需要像this.

这样的东西

<强>的jQuery

    $("#from").datepicker({onClose:function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
    }});
    $("#to").datepicker({onClose:function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
    }});

<强> HTML

<label>Start Date:</label>
<input id=”from”> </input>
<label>End Date:</label>
<input id=”to”> </input>

您可以将开始日期限制为不超过结束日期。同样的结束日期不要超出开始日期。 Demo.

Answer 2

保存最后一个日期的备份，将一个侦听器连接到两个输入的更改事件，当一个触发时检查另一个，如果日期无效则恢复到上一个日期并显示某种错误

var startDateBkup, endDateBkup;
$('#startDate').change(function(){ 

    var $this = $(this);
    var currdate = $this.datepicker('getDate'); 

    if(currdate > $('#endDate').datepicker('getDate')){

        $this.datepicker('setDate',startDateBkup);
        //put some notification

    } else {
        startDateBkup = currdate;
    }

})

并且在结束日期做同样的事情，但是反过来，不确定该小部件的所有细微差别，所以可能必须重置一些ui元素，但逻辑上将处理你正在寻找的东西

Answer 3

您可以使用后期select的{{1}}事件来操纵值，

datePicker

这是一个demo Fiddle

注意：

如果你想添加＆＃34; +1天＆＃34;到onSelect : function () { var newDate = $(this).datepicker('getDate'); if($(this).prop("id")=="plecare"){ //If plecare select event , set minDate for sosire $("#sosire").datepicker( "option", "minDate", newDate); } }然后你应该使用，

minDate

我希望这就是你想要的。

Jquery在两个日期选择器上的最小日期

3 个答案:

这是一个demo Fiddle