Bootstrap datepicker默认日期设置：当前日期及当前日期减30天

嘿，这两个关于日期默认加载的问题我之前做项目时经常遇到，给你整理了具体的实现方法，都是很容易上手的～

问题1：如何在datepicker中默认加载当前日期？ #

有两种简单的实现方式，你可以根据自己的习惯选：

• 方式一：初始化时直接指定默认日期
  在初始化datepicker的时候，通过defaultDate参数传入当前日期对象就行，datepicker会自动帮你处理格式化（记得要和你设置的format匹配哦）。代码示例：

  // 假设你的日期输入框ID是single-date
  $('#single-date').datepicker({
      defaultDate: new Date(), // 传入当前日期对象
      format: 'yyyy-mm-dd' // 按需求设置日期格式，比如'yyyy/mm/dd'也可以
  });
  

• 方式二：先给输入框赋值当前日期，再初始化
  如果你想先把日期显示在输入框里再初始化组件，就先把当前日期转成指定格式，赋值给input，再初始化datepicker：

  const today = new Date();
  // 转成yyyy-mm-dd格式，也可以用自定义函数处理其他格式
  const formattedToday = today.toISOString().split('T')[0];
  $('#single-date').val(formattedToday).datepicker({
      format: 'yyyy-mm-dd'
  });
  

问题2：如何设置起始日期为当前日期减30天，结束日期为当前日期？ #

这个核心是计算“当前日期减30天”，用JavaScript的Date对象就能轻松搞定，再配合日期格式化就可以了：

首先可以写一个复用的日期格式化函数，避免重复代码：

function formatDate(date) {
    const year = date.getFullYear();
    // 月份是从0开始的，所以要加1，还要补0确保是两位数
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

然后计算日期并赋值：

const today = new Date();
// 复制当前日期对象，避免修改原对象
const thirtyDaysAgo = new Date(today);
// 减去30天，setDate会自动处理月份/年份的跳转（比如1月1号减30天会到去年12月）
thirtyDaysAgo.setDate(today.getDate() - 30);

// 给起始日期和结束日期输入框赋值并初始化datepicker
$('#start-date').val(formatDate(thirtyDaysAgo)).datepicker({
    format: 'yyyy-mm-dd'
});

$('#end-date').val(formatDate(today)).datepicker({
    format: 'yyyy-mm-dd'
});

当然你也可以在初始化时用defaultDate参数直接传入计算好的日期对象，效果是一样的：

$('#start-date').datepicker({
    defaultDate: thirtyDaysAgo,
    format: 'yyyy-mm-dd'
});

$('#end-date').datepicker({
    defaultDate: today,
    format: 'yyyy-mm-dd'
});

这样设置后，页面加载时起始日期就会自动显示30天前的日期，结束日期显示当天日期啦～

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