使用bootstrap-datepicker预选中指定日期出现双日历如何修复？

问题根源 #

• 核心是你同时引入了bootstrap-datepicker和jQuery UI datepicker两个日历库，二者都对$('.datepicker').datepicker()调用做出响应，所以生成了两个重复日历。你代码末尾的$.datepicker.formatDate就是jQuery UI datepicker的专属方法，也能佐证这一点。
• 额外的小问题：原日期处理逻辑有错误，会导致默认选中的日期比预期早1天，且不需要单独调用setDates设置默认值，初始化时直接传参即可。

修复步骤 #

1. 移除页面中jQuery UI datepicker的相关引用，如果你不需要用到该库的功能。如果必须同时使用两个库，调用bootstrap-datepicker的noConflict方法避免命名冲突：

// 必须共存时加这行，在bootstrap-datepicker库引入后执行
var bdp = $.fn.datepicker.noConflict();
// 后续用bdp调用bootstrap-datepicker的方法
$('.datepicker').bdp({/*配置*/})

2. 修正日期处理逻辑，删掉多余的日期计算代码，直接转换为日期对象即可。
3. 初始化时直接通过dates配置项传入默认选中的日期数组，无需后续单独调用setDates。

修复后完整代码 #

var selectedDates = ["Fri Sep 03 2021 22:14:25 +0100","Sat Sep 04 2021 22:14:25 +0100"];
var myDate = [];
// 修正日期转换逻辑，不用多余计算
$.each(selectedDates, function(k, v){
  myDate.push(new Date(v));
});

$('.datepicker').datepicker({ 
  format: 'DD/MM/YYYY',
  multidate: true,
  clearBtn: true,
  weekStart: 1,
  todayHighlight: true,
  dates: myDate // 初始化时直接传入默认选中日期
});

$('.datepicker').on('changeDate', function(evt) {
  var the_dates = $(this).datepicker('getDates');
  $("#t_dates, #t_dates_").empty();
  the_dates.forEach(function(date){
    let formatShow = moment(date).format('MMMM Do YYYY');
    let formatVal = moment(date).format('YYYY-MM-DD');
    $("#t_dates").append('<div class="date-container">' +  formatShow + '</div>');
    $("#t_dates_").append('<input type="text" class="d-none" name="t_date__[]" value="' +  formatVal + '">');
  })
});

$('.btn').on('click', function() {
  var the_dates = $('.datepicker:first').datepicker('getDates');
  // 移除jQuery UI datepicker后，改用moment格式化日期即可
  let formatDates = the_dates.map(date => moment(date).format('YYYY-MM-DD'));
  console.log(formatDates);
});

验证点 #

• 页面只会渲染一个日历组件
• 默认选中预设的两个日期，用户可以正常取消、新增选中日期
• 日期取值、格式化逻辑正常

内容的提问来源于stack exchange，提问作者Mads Stenbjerre