在第一个日期被选中后禁用过去的日期

Question

我正在做一个简单的预订表单，它使用GET重定向到一个staah预订引擎(他们没有任何apis或嵌入式小部件)。

预订引擎只接受"dd yyyy“日期格式(如2018年4月19日)

我有搜索，但没有找到任何工作解决方案，最近我发现工作小提琴，我已经编辑小提琴，以满足我的需要(你知道我想在小提琴上实现什么)。您可以在这里看到它：https://jsfiddle.net/k5zookLt/1929/，但问题是它们对HTML代码有不同的处理方法，我试图为我的html修改js代码，但它不起作用。我在javascript方面没有任何技能。我不知道为什么这个小提琴在我的html代码中不起作用

我的代码

<div class="col-md-2 col-sm-3">
<div class="input-group date" >
<input type="text" class="jaraksmall sm-form-control form-control from " id="from" name="from" required>
</div>

</div>
<div class="col-md-2 col-sm-3">
<div class="input-group date"> 
<input type="text" class="jaraksmall sm-form-control form-control to" id="to" name="to" required>
</div>

篡改html代码：

<div class="line col-sm-4">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 input-sm"placeholder="CheckIn" >
</div>

<div class="form-group">
<label>First check out:</label>
<input type="text" class="form-control form-control-2 input-sm" placeholder="CheckOut">
</div>
</div><!--line-->    

如何使小提琴的js代码在我的html代码中工作得很好？抱歉，我的英语不好

Answer 1

这是因为.each的选择器和查找输入元素的选择器没有找到所需的元素。你需要：

( 1)删除每项陈述。

2)修改datepicker输入元素选择器，以使用您添加的类(往返)。

var startDate = new Date();
var fechaFin = new Date();
var FromEndDate = new Date(); 
var ToEndDate = new Date();

$(".from").datepicker({
autoclose: true,
startDate: "+0d",
format: 'd M yyyy'
}).on('changeDate', function(selected){
    startDate = new Date(selected.date.valueOf());
    startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))+1);
    $('.to').datepicker('setStartDate', startDate);
}); 

$('.to').datepicker({
autoclose: true,
format: 'd M yyyy'
}).on('changeDate', function(selected){
    FromEndDate = new Date(selected.date.valueOf());
    FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
    $('.from').datepicker('setEndDate', FromEndDate);
});  

工作演示

Answer 2

您还可以如下所示替换html代码

<div class="line" style="width:100%">
<div class="col-md-2 col-sm-3" style="display: inline-block">
<div class="input-group date" >
<input type="text" class="jaraksmall sm-form-control form-control-1 form-control from " id="from" name="from" required>
</div>
</div>

<div class="col-md-2 col-sm-3" style="display: inline-block">
<div class="input-group date"> 
<input type="text" class="jaraksmall sm-form-control form-control-2 form-control to" id="to" name="to" required>
</div>
</div>
</div>

jsfiddledemo