Bootstrap Datepicker日期禁用、联动问题及默认选中异常咨询

嘿，这三个需求都能轻松搞定！我给你拆解成三个部分，附上可直接运行的代码示例，你照着改就行：

Bootstrap Datepicker自带了startDate配置项，直接把它设为new Date()或者字符串'0'（代表今天），就能禁止选择今天之前的日期啦。

示例代码：

<!-- 开始日期输入框 -->
<input type="text" id="start-date" class="form-control datepicker">

<script>
$('#start-date').datepicker({
    format: 'yyyy-mm-dd', // 日期格式可按需调整
    startDate: new Date(), // 禁用今天之前的所有日期
    autoclose: true // 选完日期自动关闭弹窗，体验更好
});
</script>

这里需要监听开始日期的changeDate事件，每当用户选好开始日期后，就动态更新结束日期的startDate配置，同时还要处理初始化时的情况（比如开始日期默认有值的话，结束日期也要同步限制）。

示例代码：

<!-- 结束日期输入框 -->
<input type="text" id="end-date" class="form-control datepicker">

<script>
// 先初始化结束日期
const endDatePicker = $('#end-date').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true
});

// 监听开始日期的变化事件
$('#start-date').on('changeDate', function(e) {
    // 获取选中的开始日期
    const selectedStartDate = e.date;
    // 更新结束日期的可选起始日期
    endDatePicker.datepicker('setStartDate', selectedStartDate);
});

// 如果页面加载时开始日期已有值，初始化时就同步限制结束日期
const initialStartDate = $('#start-date').val();
if (initialStartDate) {
    endDatePicker.datepicker('setStartDate', new Date(initialStartDate));
}
</script>

默认选中今日通常是因为Datepicker自动把今天设为默认值了，咱们只需要在初始化时把defaultDate设为null或者空字符串，同时确保没有开启todayHighlight（如果开启的话会高亮今天，但不会自动选中，不过保险起见可以关掉）。

示例代码：

<input type="text" id="no-default-date" class="form-control datepicker">

<script>
$('#no-default-date').datepicker({
    format: 'yyyy-mm-dd',
    defaultDate: null, // 取消默认选中今日
    todayHighlight: false, // 可选：如果不需要高亮今天就关掉
    autoclose: true
});
</script>

把三个需求放在一起的完整示例：

<div class="container mt-4">
    <div class="row">
        <div class="col-md-4">
            <label>开始日期</label>
            <input type="text" id="start-date" class="form-control datepicker">
        </div>
        <div class="col-md-4">
            <label>结束日期</label>
            <input type="text" id="end-date" class="form-control datepicker">
        </div>
        <div class="col-md-4">
            <label>无默认日期</label>
            <input type="text" id="no-default-date" class="form-control datepicker">
        </div>
    </div>
</div>

<script>
// 初始化开始日期
const startDatePicker = $('#start-date').datepicker({
    format: 'yyyy-mm-dd',
    startDate: new Date(),
    autoclose: true
});

// 初始化结束日期
const endDatePicker = $('#end-date').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true
});

// 监听开始日期变化，同步限制结束日期
startDatePicker.on('changeDate', function(e) {
    endDatePicker.datepicker('setStartDate', e.date);
});

// 初始化无默认日期的Datepicker
$('#no-default-date').datepicker({
    format: 'yyyy-mm-dd',
    defaultDate: null,
    todayHighlight: false,
    autoclose: true
});
</script>

注意哦：确保你已经正确引入了Bootstrap的CSS、JS以及Bootstrap Datepicker的CSS和JS文件，不然这些配置不会生效哒！

内容的提问来源于stack exchange，提问作者M Ahmed