我有引导日期选择器的问题,我使用this插件,因为禁用过去的日期和相关的禁用。用于引导的日期选择器在模式窗口中不起作用
是否问题可能是因为我在datepicker的相同类上使用了两次相同的页面窗体?你知道为什么会发生这种情况吗?
在这个(第一)的情况下,当我用这个代码(工作完美)
<ul class="nav navbar-nav navbar-right">
<li class="book dropdown">
<div class="booking btn-default dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" title="Book now">Book now</div>
<div class="dropdown-menu" role="menu">
<form id="check_available" method="post" action="#" role="form" autocomplete="off">
<div class="form-group arrival">
<input type="text" class="form-control date-selector" id="arrival" readonly="readonly" name="arrival" placeholder="ARRIVAL" required>
</div>
<div class="form-group departure">
<input type="text" class="form-control date-selector" id="departure" readonly="readonly" name="departure" placeholder="DEPARTURE" required>
</div>
<div class="form-group guests">
<div class="qty-buttons">
<input type="button" value="+" class="qtyplus" name="quantity">
<input type="number" name="quantity" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" id="quantity" value class="qty form-control required" placeholder="0" required>
<input type="button" value="-" class="qtyminus" name="quantity">
</div>
</div>
<button type="submit" class="btn-check" id="submit-check" title="Send">Send</button>
</form>
</div>
</li>
</ul>
<!-- /.navbar-right-->
但是当我用在模态窗口相同的形式这种情况下(不工作所有的,因为当我点击到达或离开输入,应开通日期弹出,但没有)
<div class="modal modal-fullscreen fade" id="book-modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true" title="Close">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Book now</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form id="check_available" method="post" action="#" role="form" autocomplete="off">
<div class="form-group arrival">
<input type="text" class="form-control date-selector" id="arrival" readonly="readonly" name="arrival" placeholder="ARRIVAL" required>
</div>
<div class="form-group departure">
<input type="text" class="form-control date-selector" id="departure" readonly="readonly" name="departure" placeholder="DEPARTURE" required>
</div>
<div class="form-group guests">
<div class="qty-buttons">
<input type="button" value="+" class="qtyplus" name="quantity">
<input type="number" name="quantity" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" id="quantity" value class="qty form-control required" placeholder="0" required>
<input type="button" value="-" class="qtyminus" name="quantity">
</div>
</div>
<button type="submit" class="btn-check" id="submit-check" title="Send">Send</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
//Datepicker
if (jQuery('#arrival').length) {
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#arrival').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#departure')[0].focus();
}).data('datepicker');
var checkout = $('#departure').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
}
非常感谢Osgux,尽管我必须将类的名称更改为模态div,但我必须采取和您的合作。实际上,当我们通过jQuery或JavaScript调用时,我们不能使用两个相同的类。 –