如何实现daterangepicker值同步至隐藏输入框并解决提交重置问题？

嘿，我帮你找出问题所在啦，你的代码里有几个关键的小错误导致功能失效，咱们一步步修正：

核心错误点 #

• Input元素操作方式错误：<input>标签的内容是通过value属性管理的，jQuery中需要用.val()方法来读写，而不是.html()（.html()是用来操作元素innerHTML的，input标签没有这个属性）。同时，jQuery对象不能直接使用原生JS的.value属性，必须用.val()方法赋值。
• 隐藏框赋值逻辑混乱：你之前试图通过主输入框中转赋值的写法完全错误，其实可以直接利用daterangepicker回调里的start和end对象，直接格式化后赋值给隐藏框。

修正后的完整代码 #

HTML（无需修改） #

<input type="text" class="main" name="maininput" id="datesearch">
<input type="hidden" name="start" id="startdate">
<input type="hidden" name="end" id="enddate">

JavaScript #

$(function() {
  var start = moment().subtract(29, 'days');
  var end = moment();

  function cb(start, end) {
    // 正确设置主输入框的显示值（用.val()而非.html()）
    $('#datesearch').val(start.format('YYYY/MM/DD') + ' - ' + end.format('YYYY/MM/DD'));
    // 直接将moment对象格式化为YYYY-MM-DD，同步到隐藏输入框
    $('#startdate').val(start.format('YYYY-MM-DD'));
    $('#enddate').val(end.format('YYYY-MM-DD'));
  }

  $('#datesearch').daterangepicker({
    startDate: start,
    endDate: end,
    timePicker: true, // 注：如果不需要时间选择，可将此设为false，否则建议显示格式加上时间
    ranges: {
      'Today': [moment(), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
    }
  }, cb);

  // 初始化时调用回调，设置初始的显示值和隐藏框值
  cb(start, end);
});

额外说明 #

• 你开启了timePicker: true，但当前的日期格式没有包含时间部分，如果不需要时间选择功能，建议把这个参数设为false；如果需要时间，记得调整格式字符串（比如YYYY/MM/DD HH:mm）。
• 修正后，用户选择日期范围时，回调函数会实时更新主输入框的显示内容，同时将符合YYYY-MM-DD格式的日期同步到两个隐藏输入框，提交表单时就能拿到正确的选中值，不会再返回初始的默认日期了。

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