私はブートストラップのdatepickerに問題があります。これは、以前は無効にしていて、無効にしていたので、thisプラグインを使用しています。ブートストラップのDatepickerがモーダルウィンドウで機能しない
datepickerの同じクラスで同じページフォームで2回使用するため、問題が発生する可能性はありますか?なぜこれが起こっているのか考えていますか?私はこのコードを使用し、この(最初の)状況、(仕事完璧)
<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さん、ありがとうございました。私はあなたとあなたの誓いをも取らなければなりませんでした。実際には、jQueryやJavaScriptを呼び出すときに同じクラスの2つを使用することはできません。 –