Question

我希望用户可以选择开始日期并将结束日期限制为所选开始日期旁边所选日期的开始日期。如何在起始和结束日期的boostrap datepickers上执行此操作

Answer 1

下载bootstrap-datepicker.js

HTML代码

<div class="col-md-6 ">
    <div class="form-group">
        <label>Start Date</label>
        <div class='input-group date'>
            <input type='text' id='datecheckin1' class="form-control" placeholder="DD/MM/YYYY" data-date-format="dd/M/yyyy" readonly />
            <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
        </div>

    </div>
</div>
<div class="col-md-6 ">
    <div class="form-group">
        <label>End Date</label>
        <div class='input-group date'>
            <input type='text' id='datecheckout1'  class="form-control" placeholder="DD/MM/YYYY" data-date-format="dd/M/yyyy" readonly />
            <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
    </div>
</div>

Java脚本代码

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

        var checkin2 = $('#datecheckin1').datepicker({
            onRender: function (date) {
//Here we restrict the date date of start datepicker
                return date.valueOf() < now.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function (ev) {

            var newDate = new Date(ev.date);

            newDate.setDate(newDate.getDate() + 1);
//Here we set the date of end datepicker
            checkout2.setValue(newDate);


            checkin2.hide();
            $('#datecheckout1')[0].focus();
        }).data('datepicker');
        var checkout2 = $('#datecheckout1').datepicker({
            onRender: function (date) {
//Here we restrict the date of enddatepicker
                return date.valueOf() <= checkin2.date.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function () {
            checkout2.hide();
        }).data('datepicker');

希望这会对你有所帮助。

Answer 2

$（ '＃dtpicker'）。日期选择器（{ endDate：' - 1d' }）。在（....

bootstrap datepicker允许选择结束日期作为开始日期旁边的一天

2 个答案: