0

編集：答えを得た解決策。

専門家が JavaScript コードを手伝ってくれませんか?

私はブートストラップ3で動作するeternicode Datepickerを持っています(クリックして日付を選択すると動作します) https://github.com/eternicode/bootstrap-datepicker/tree/bs3

しかし今、私はチェックインとチェックアウトの 2 つの日付を持っています。チェックインを選択する際、チェックアウト後であれば、チェックアウトを選択したチェックインから+1日後に変更します。

HTML と JavaScript のコードがいくつかありますが、うまく機能しません: チェックインを選択すると、チェックアウト日は今日であり、チェックイン + 1 日を選択する必要があります。チェックアウトを選択すると、当日の前日のみが無効になり、チェックイン日の翌日を選択した場合にのみ機能します。

チェックアウトのsetValueに何らかの問題があると思われます。

HTML コード (入力):

    <div class="form-group">
    <label for="DtChkIn">Data Checkin</label>
        <div class="input-group date" id="dp1">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input type="text" class="form-control input-sm" id="DtChkIn" placeholder="Data CheckIn" readonly="readonly">
        </div>
</div>
<div class="form-group">
    <label for="DtChkOut">Data Checkout</label>
        <div class="input-group date" id="dp2">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input type="text" class="form-control input-sm" id="DtChkOut" placeholder="Data CheckOut" readonly="readonly">
        </div>
</div>

そしてJavaScript：

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dp1').datepicker({
    language: "pt",
    format: "dd/mm/yyyy",
    beforeShowDay: function (date) {
        return date.valueOf() < now.valueOf() ? false : '';
    }
}).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();
    $('#DtChkOut').focus();
}).data('datepicker');

var checkout = $('#dp2').datepicker({
    language: "pt",
    format: "dd/mm/yyyy",
    beforeShowDay: function (date) {
        return date.valueOf() <= checkin.date.valueOf() ? false : '';
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');
4

1 に答える 1

0

解決策: eternicode datepicker bs3 ブランチ (チェックイン チェックアウト) で動作するスクリプト

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dp1').datepicker({

    beforeShowDay: function (date) {
        return date.valueOf() >= now.valueOf();
    }
}).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);
        checkout.setDate(newDate);
        checkout.update();
    }
    checkin.hide();
    $('#dp2')[0].focus();
}).data('datepicker');
var checkout = $('#dp2').datepicker({
    beforeShowDay: function (date) {
        return date.valueOf() > checkin.date.valueOf();
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');

チェックアウト日と比較する前に、チェックイン日を更新するために追加された行に注意してください。

   checkout.setDate(newDate);
   checkout.update();
于 2014-01-30T16:53:36.820 に答える