Question

我有两个输入字段：
<input name="check_in" type="date" class="checkin">和
<input name="check_out" type="date" class="checkout"
我想链接它们，所以当我从check_in字段中选择一个日期时，我只能选择当天或之后的某天（早期禁用日期）。之后，我必须在check_out字段中选择一天，我只能选择check_in或之后选择的日期（其他日期必须禁用）

我一直在尝试多种解决方案和代码片段，但没有结果

Answer 1

如果您使用的是Bootstrap datepicker，则可以将check_out的开始日期指定给check_in上的日期。像

这样的东西

$('.checkin').datepicker({
    startDate: 'd' //this means today
});

$('.checkout').datepicker({
    startDate: $('.checkin').val(); //Not sure of this but you get the idea
});

替代方案，只需使用daterage选项，它已经实现了所有内容：

<div class="input-group input-daterange">
    <input type="text" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" value="2012-04-19">
</div>

和Javascript一起使用

$('.input-daterange input').each(function() {
    $(this).datepicker('clearDates');
});

更多信息：https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range

这将为您提供开箱即用的功能。

如何链接日期类型的两个输入字段？

1 个答案: