Bootstrap daterangepicker按钮默认标签不显示，显示起止日期问题

我之前也碰到过一模一样的问题，这其实是daterangepicker的默认行为在搞鬼——它会自动把触发元素的内容（对于<input type="button">来说就是value属性）替换成默认的开始/结束日期组合，哪怕你已经手动设置了按钮的显示文本。

下面给你两种靠谱的解决方法，按需选择：

方法一：禁止自动更新，手动控制显示内容（推荐） #

这种方法能完全掌控按钮的显示文本，初始显示你设置的Datuminterval，用户选择日期后再替换成日期范围，取消选择时还能恢复初始文本。

HTML代码保持不变： #

<input class="search-select date-range-picker" type="button" value="Datuminterval" />

修改JS初始化代码： #

$('.date-range-picker').daterangepicker({
  autoUpdateInput: false, // 核心配置：禁止插件自动修改按钮的value
  // 这里放你的其他配置，比如默认日期范围
  startDate: moment().subtract(7, 'days'),
  endDate: moment()
}, function(start, end, label) {
  // 用户选择日期后，手动更新按钮文本为选中的日期范围
  $(this).val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
});

// 监听取消事件，用户点击取消按钮时恢复初始文本
$('.date-range-picker').on('cancel.daterangepicker', function(ev, picker) {
  $(this).val('Datuminterval');
});

方法二：初始化后强制重置按钮文本 #

如果你不需要取消时恢复文本，只是想让初始显示Datuminterval，可以在插件初始化完成后手动把按钮的value改回去。不过这种方法可能会有一瞬间的文本闪烁（先显示默认日期再变回初始文本），适合对体验要求不那么高的场景：

$('.date-range-picker').daterangepicker({
  // 你的配置项
}, function(start, end, label) {
  $(this).val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
});

// 初始化完成后，强制重置按钮文本
$('.date-range-picker').val('Datuminterval');

简单来说，核心就是要么阻止插件自动修改按钮文本，要么在它修改后再改回来，两种方式都能解决你的问题~

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