启动日期选择器允许选择结束日期作为开始日期旁边的一天

boostrap datepicker allow to select end date as one day next to start date

本文关键字：日期 开始 一天 选择器 选择结束 启动      更新时间：2023-09-26

我有这样的情况，我希望用户选择开始日期，并将结束日期限制为所选开始日期旁边的一天的选定开始日期。我怎么能做到这一点在启动日期选择器开始和结束日期

从这里下载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 Script代码

    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');

$('#dtpicker').datepicker({endDate:‘1 d’})。(…

相关文章：