如何将Bootstrap双日历Date Range日期选择器改为单日历版？

要实现单日历的日期范围选择，你需要修改HTML结构并添加自定义的日期选择逻辑，具体步骤如下：

1. 修改HTML结构 #

移除原生的input-daterange容器（该类是bootstrap-datepicker默认启用双日历的标识），改用单个输入框：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

<div class="input-group" id="datepicker">
    <input type="text" class="input-sm form-control" id="date-range" placeholder="选择日期范围"/>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

2. 添加自定义JS逻辑 #

通过监听日期选择事件，实现“第一次点击选起始日期，第二次点击选结束日期”的单日历范围选择：

let startDate, endDate;

$('#date-range').datepicker({
    autoclose: true,
    todayHighlight: true
}).on('changeDate', function(e) {
    // 第一次点击设置起始日期
    if (!startDate) {
        startDate = e.date;
        $(this).datepicker('setStartDate', startDate);
    } 
    // 第二次点击设置结束日期并格式化显示
    else {
        endDate = e.date;
        // 处理结束日期早于起始日期的情况
        if (endDate < startDate) {
            [startDate, endDate] = [endDate, startDate];
        }
        $(this).datepicker('setEndDate', endDate);
        // 格式化日期并显示范围
        const format = 'yyyy-mm-dd';
        const formattedStart = $.fn.datepicker.DPGlobal.formatDate(startDate, format);
        const formattedEnd = $.fn.datepicker.DPGlobal.formatDate(endDate, format);
        $(this).val(`${formattedStart} to ${formattedEnd}`);
        // 重置状态，允许重新选择范围
        startDate = endDate = null;
        $(this).datepicker('setStartDate', null);
        $(this).datepicker('setEndDate', null);
    }
});

关键说明 #

• 移除input-daterange类后，bootstrap-datepicker会默认渲染单个日历
• 通过changeDate事件捕获用户的两次点击，分别绑定为起始和结束日期
• 添加了日期顺序校验，避免出现结束日期早于起始日期的错误
• 完成选择后自动格式化日期范围并显示在输入框中，同时重置选择状态以便下次操作

内容的提问来源于stack exchange，提问作者Regular User