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

Question

我有两个日期选择器#plecare和#sosire 。 我已设法为两个日期选择器设置最小日期，但我需要#sosire始终> #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: '« Luna precedenta',
        nextText: 'Luna urmatoare »',
        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

我明白你需要这样的东西。

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>

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

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

您可以使用更晚的datePicker select事件来操作值，

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添加“ +1天 ”那么你应该使用，

var newDate = $(this).datepicker('getDate');
newDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate()+1); 

我希望这就是你想要的。