如何将bootstrap datepicker拆分为月/日/年独立输入字段并联动选择

可以实现，仅需要修改原有JS初始化逻辑，新增点击触发和日期选中回填逻辑即可，修改后的完整代码如下：

$(function () {
  // 初始化日期选择器
  const $datepicker = $("#datepicker").datepicker({ 
        autoclose: true, 
        todayHighlight: true
  }).datepicker('update', new Date());
  
  // 初始化回填当前默认日期到三个输入框
  const initDate = $datepicker.datepicker('getDate');
  fillDateFields(initDate);

  // 三个输入框点击唤起日期面板
  $('#month, #day, #year').on('click', function() {
    $datepicker.datepicker('show');
  })

  // 选中日期后回填到三个输入框
  $datepicker.on('changeDate', function(e) {
    fillDateFields(e.date);
  })

  // 封装日期回填方法
  function fillDateFields(date) {
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const year = date.getFullYear();
    $('#month').val(month);
    $('#day').val(day);
    $('#year').val(year);
  }
});

• 原有HTML、CSS代码不需要修改，仅替换原有JS逻辑即可
• padStart方法用于保证月、日不足两位时自动补0，符合常规日期填写规范，如果不需要补0可以去掉该方法直接取值即可
• 初始化时会自动把当前默认日期填充到三个输入框，不需要用户手动选择首次默认值

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