Bootstrap DateRangePicker问题：初始化自动设今日，autoUpdateInput=false无效

嘿，我之前在项目里用Bootstrap DateRangePicker做巴西本地化时，也碰到过几乎一模一样的问题！给你梳理下问题根源和可行的解决办法：

• 初始化自动填充当日日期：这是插件的默认行为——当autoUpdateInput设为true时，即便你没指定初始日期范围，插件也会自动把「当日-当日」填充到输入框里。
• 设autoUpdateInput: false后无法接收选中日期：这个参数的作用是完全禁用插件自动更新输入框的逻辑，所以必须我们自己手动监听事件来同步选中的日期。
• 日期显示错误/选中不生效：大概率是pt-br本地化配置没做对，比如格式字符串不匹配、本地化资源没加载，或者周起始日的设置不符合巴西习惯（巴西周一是每周第一天）。

1. 正确配置pt-br本地化 #

首先要确保你的本地化参数完全符合巴西用户的使用习惯，同时要匹配插件依赖的moment.js格式符：

$('#daterange').daterangepicker({
  locale: {
    format: 'DD/MM/YYYY', // 巴西常用的日/月/年格式
    separator: ' - ',
    applyLabel: 'Aplicar',
    cancelLabel: 'Cancelar',
    fromLabel: 'De',
    toLabel: 'Até',
    customRangeLabel: 'Customizado',
    daysOfWeek: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    firstDay: 1 // 巴西以周一为每周第一天，必须设置这个！
  },
  autoUpdateInput: false // 关闭自动填充默认日期
});

2. 手动监听事件更新输入框 #

因为关闭了autoUpdateInput，所以要监听插件的apply和cancel事件，手动同步输入框内容：

// 选中日期后更新输入框
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
  $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
});

// 取消选择时清空输入框（也可以设置成你需要的默认值）
$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
  $(this).val('');
});

3. 彻底解决初始化自动填充问题 #

除了设置autoUpdateInput: false，还要确保输入框的初始值为空，避免插件读取到默认值：

<input type="text" id="daterange" value="" placeholder="Selecione o período" />

如果需要默认选中某个特定范围（比如近7天），可以手动设置startDate和endDate，但不要留空让插件自动填充。

4. 排查日期显示/选中失效的坑 #

• 确认你已经正确引入了moment.js（DateRangePicker依赖它处理日期）
• 检查是否有其他JS代码修改了输入框的value，或者阻止了插件的事件冒泡
• 确保本地化的月份、星期缩写没有拼写错误，不然插件会出现显示异常

<input type="text" id="daterange" class="form-control" placeholder="Selecione o período" />

<!-- 依赖资源顺序不能错 -->
<script src="moment.min.js"></script>
<script src="daterangepicker.js"></script>
<link rel="stylesheet" href="daterangepicker.css" />

<script>
$(function() {
  $('#daterange').daterangepicker({
    locale: {
      format: 'DD/MM/YYYY',
      separator: ' - ',
      applyLabel: 'Aplicar',
      cancelLabel: 'Cancelar',
      fromLabel: 'De',
      toLabel: 'Até',
      customRangeLabel: 'Customizado',
      daysOfWeek: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
      monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
      firstDay: 1
    },
    autoUpdateInput: false
  });

  $('#daterange').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
  });

  $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
  });
});
</script>

内容的提问来源于stack exchange，提问作者João Pedro Raldi