日期选择器：bootstrap-datepicker选项说明

<form>
    <!-- 单个日期选择 -->
    <div class="mb-3">
      <label class="form-label">1.选择单日</label>
      <div class="input-group">
        <input type="text" class="form-control" id="datepicker">
      </div>
    </div>

    <!-- 单个日期选择 -->
    <div class="mb-3">
      <label class="form-label">2.设置日期格式、语言、选择后关闭日期、是否显示第几周、高亮当前日期、是否显示清除按钮、是否显示"今天"按钮</label>
      <div class="input-group">
        <input type="text" class="form-control" id="datepicker2">
      </div>
    </div>

    <!-- 单个日期选择 -->
    <div class="mb-3">
      <label class="form-label">3.选择单日-配置为中文常用格式</label>
      <div class="input-group">
        <input type="text" class="form-control" id="datepicker3">
      </div>
    </div>

    <!-- 选择区间 -->
    <div class="mb-3">
      <label class="form-label">4.选择区间-选择后其他灰掉不可选</label>
      <div class="input-group">
        <input type="text" class="form-control" name="start" id="start-date" />
        <span class="input-group-text border-start-0 border-end-0 rounded-0">至</span>
        <input type="text" class="form-control" name="end" id="end-date" />
      </div>
    </div>

    <!-- 选择区间-效果2 -->
    <div class="mb-3">
      <label class="form-label">5.选择区间-效果2-直接区间显示高亮-最实用（推荐）</label>
      <div class="input-daterange input-group">
        <input type="text" class="form-control" />
        <span class="input-group-text border-start-0 border-end-0 rounded-0">至</span>
        <input type="text" class="form-control"/>
      </div>
    </div>

    <!-- 选择年月 -->
    <div class="mb-3">
      <label class="form-label">6.选择年月</label>
      <div class="input-group">
        <input type="text" class="form-control" id="monthPicker">
      </div>
    </div>

    <!-- 选择年 -->
    <div class="mb-3">
      <label class="form-label">7.选择年</label>
      <div class="input-group">
        <input type="text" class="form-control" id="yearPicker">
      </div>
    </div>

    <!-- 多选日期|分隔 -->
    <div class="mb-3">
      <label class="form-label">8.多选日期|分隔</label>
      <div class="input-group">
        <input type="text" class="form-control" id="manyPicker">
      </div>
    </div>

    <!-- 内联 -->
    <div class="mb-3">
      <label class="form-label">9.内联</label>
      <div class="input-group" id="inlineDate"></div>
    </div> 

    <!-- 日期限制控制 -->
    <div class="mb-3">
      <label class="form-label">10.日期限制控制-预订日期选择（今天起3个月内，禁用过去日期和周一）：</label>
      <div class="input-group">
        <input type="text" class="form-control" id="checkin-date">
      </div>
    </div>

    <!-- 日期限制控制 -->
    <div class="mb-3">
      <label class="form-label">11.日期限制控制-生日选择器（限制1980-2026年出生）：</label>
      <div class="input-group">
        <input type="text" class="form-control" id="birthday-picker">
      </div>
    </div>

  
  </form>

<script>
// 【第一步：先执行冲突改名，必须放在最前面】
if (typeof($.fn.datepicker) != 'undefined') {
  $.fn.bootstrapDP = $.fn.datepicker.noConflict();
}
$(document).ready(function(){
    //1.选择单日初始化
    $('#datepicker').bootstrapDP();

    //2.可以通过传递一个对象来配置 DatePicker，例如设置日期格式、语言、选择后关闭日期、是否显示第几周、高亮当前日期、是否显示清除按钮、是否显示"今天"按钮等。
    $('#datepicker2').bootstrapDP({
      format: "yyyy-mm-dd", // 日期格式
      language: "zh-CN", // 语言设置为中文
      autoclose: true, // 选择日期后自动关闭日期选择器
      calendarWeeks: true, //是否显示周数（ISO标准周编号）
      todayHighlight: true, //是否高亮显示当前日期
      clearBtn: true,  //是否显示清除按钮
      todayBtn : "linked", //是否显示"今天"按钮，"linked"会同时选中当前日期：todayBtn : "linked"

    });

    //3.配置为中文常用格式：2023年10月05日
    $('#datepicker3').bootstrapDP({
      format: "yyyy年mm月dd日",
      language: "zh-CN",
      autoclose: true 
    });

    //4.选择区间-开始时间：
    $('#start-date').bootstrapDP({
      todayBtn : "linked",
      autoclose : true,  // 选完自动关闭日历
      todayHighlight : true, // 高亮今天
      endDate : new Date()
    }).on('changeDate',function(e){
      var startTime = e.date;
      $('#end-date').bootstrapDP('setStartDate',startTime);
    });
    //4.选择区间-结束时间：
    $('#end-date').bootstrapDP({
      todayBtn : "linked",
      autoclose : true,
      todayHighlight : true,
      endDate : new Date()
    }).on('changeDate',function(e){
      var endTime = e.date;
      $('#start-date').bootstrapDP('setEndDate',endTime);
    });

    //5. 选择区间-效果2 最实用
    $('.input-daterange').bootstrapDP({
      format: 'yyyy-mm-dd',
      todayBtn: "linked",
      todayHighlight: true,
      endDate: new Date(),
      language: 'zh-CN'
    });

    //6. 选择年月
    $('#monthPicker').bootstrapDP({
      format: 'yyyy年mm月',
      language: "zh-CN",
      minViewMode: 1, // 只显示年月，隐藏日期
      autoclose : true,
    });

    //7. 选择年
    $('#yearPicker').bootstrapDP({
      format: 'yyyy年',
      language: "zh-CN",
      minViewMode: 2, // 只显示年，隐藏日期
      autoclose : true,
    });

    //8. 多选日期|分隔
    $('#manyPicker').bootstrapDP({
      multidate: 3, // 最多选择3个日期
      multidateSeparator: " | ",
      format: "yyyy-mm-dd",
      todayHighlight: true
    });

    //9.内联
    $('#inlineDate').bootstrapDP({
      format: "yyyy-mm-dd", // 日期格式
      language: "zh-CN", // 语言设置为中文
      todayHighlight : true, // 高亮今天
      todayBtn : "linked", //是否显示"今天"按钮，"linked"会同时选中当前日期
    });

    //10.日期限制控制-预订日期选择（今天起3个月内，禁用过去日期和周一）
    $('#checkin-date').bootstrapDP({
      startDate: "today", // 开始日期 今天
      endDate: "+3m", // 结束日期 3个月
      daysOfWeekDisabled: [1], // 禁用周一
      language: "zh-CN",
      autoclose: true
    });

    //11.日期限制控制-生日选择器（限制1980-2026年出生）：
    $('#birthday-picker').bootstrapDP({
      startDate: "1980-01-01",
      endDate: "2026-12-31",
      maxViewMode: 2, //  decade视图（10年选择）
      todayHighlight: false,
      language: "zh-CN"
    });


});
</script>

备注：

调用 bootstrap.min.css 和 bootstrap-datepicker.min.css

调用以下JS：

jquery.min.js（jQuery（datepicker依赖））

bootstrap.bundle.min.js（Bootstrap JS）

bootstrap-datepicker.min.js（Datepicker JS）

bootstrap-datepicker.zh-CN.min.js（Datepicker JS 中文汉化包）