如何链接两个日期选择器，以便第一个日期选择器上的开始日期是第二个日期选择器上的最小日期？答案

【问题标题】：How to link two datepicker so that the begin date on the first datepicker is the minimum date on the second datepicker?如何链接两个日期选择器，以便第一个日期选择器上的开始日期是第二个日期选择器上的最小日期？
【发布时间】：2015-10-08 14:54:11
【问题描述】：

我正在使用 UIKit 网络框架 (getuikit.com)

有什么方法可以使用两个日期选择器，以便第一个选择的开始日期与第二个日期选择器允许的最小日期匹配？（基本上是为了让它像酒店/航班预订一样工作）

这是我在 JQuery 中尝试过的：

$("#startDate").blur(function() {
  var init = $("#startDate").val();
$("#endDate").attr("data-uk-datepicker","format:'DD/MM/YYYY', minDate:"+init+", maxDate:10");
  UIkit.datepicker("#endDate");
});

【问题讨论】：

标签： jquery datepicker getuikit

【解决方案1】：

首先你应该使用hide.uk.datepicker 事件而不是jQuery 的模糊。

请注意，maxDate:10 只为您提供距当前日期的天数。

然后你可以这样做：

HTML：

<form class="uk-form">
        <input type="" id="startDate" data-uk-datepicker="{format:'DD/MM/YYYY'}">
        <input type="" id="endDate">
    </form>

JS：

jQuery(document).ready(function() 
{
    jQuery("#startDate").on("hide.uk.datepicker", function (event) 
    {
        var init = jQuery(this).val();
        var dateArray = init.split("/");

        var day = parseFloat(dateArray[0]);
        var month = parseFloat(dateArray[1]);
        var year = parseFloat(dateArray[2]);

        var newDate = new Date(Date.UTC(year,month - 1,day));

        //add 10 days
        newDate.setDate(newDate.getDate() + 10);

        var newDay = newDate.getDate();
        var newMonth = newDate.getMonth() + 1;
        var newYear = newDate.getFullYear();

        var formatedDate = newDay + "." + newMonth + "." + newYear;

        UIkit.datepicker("#endDate", {format:"DD/MM/YYYY", minDate:init, maxDate:formatedDate});
    });
});

CSS：

.uk-datepicker-date-disabled
{
    color: gray;
}

它应该是这样的：

【讨论】：

这个成功了，但它似乎只渲染一次。我应该使用 update.uk.datepicker 吗？在哪里？

【解决方案2】：

这就是你想要的：
您可以将代码自定义为您的应用程序！

     var $inDate = $("[name=outDate]");
    var $outDate = $("[name=inDate]");

$outDate.datepicker('setDate', new Date());
    $( ".datepicker" ).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        minDate: 0,
        beforeShow : function(input, inst){
                if($inDate.is(input)){
                    var fromDate = $outDate.datepicker("getDate");
                    if(fromDate == null){
                        $outDate.datepicker("setDate", new Date());
                        fromDate  = new Date();
                    }
                    fromDate.setDate(fromDate.getDate() + 1);
                    inst.settings.minDate = fromDate;
                }
        },
        onSelect: function(dataText, inst){
                if($outDate.is(inst.input)){
                        var fromDate = $outDate.datepicker("getDate");
                        var toDate = $inDate.datepicker("getDate");
                        if(toDate && fromDate.getTime()>=toDate.getTime()){
                                toDate.setTime(fromDate.getTime());
                                toDate.setDate(toDate.getDate()+1);
                                $inDate.datepicker("setDate", toDate);					
                        }
                }
        },
      
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>


<small class="labelFlightForm">Check-in Date</small><br />
<input type="text" name="inDate"class="form-control input-sm datepicker" id="datepicker"><br />
                 
<small class="labelFlightForm">Check-out Date</small><br />
  <input type="text" name="outDate" class="form-control input-sm datepicker"  id="returnDatepicker">

【讨论】：