以表格形式获取非输入字段，例如boostrap datepicker

Question

我正在尝试通过使用GET提交的表单从boostrap daterangepicker发送数据： http ://www.daterangepicker.com/。

这是HTMl的样子：

<form class="form-inline" id="searchForm" role="form" action="https://script.google.com/a/macros/firstcallres.com/s/AKfycbydvjgkr3nTfA-ZLHe_m1kqavoJCjQhl5bm7Tqelo4/dev" method="get">
  <div class="form-group  col-xs-3" style="margin-left: 10px;">
    <label for="nameInput">Name:</label>
    <input type="text" class="form-control" id="nameInput" list="colleagueNames" placeholder="Colleague Name" style=" padding: 1px;" name="user">
  </div>
  <div class="form-group  col-xs-3" style="margin-left:10px;">
    <label for="reportTypeInput">Report Type:</label>
    <input type="text" class="form-control" id="reportTypeInput" placeholder="Report Type" name="reportType">
  </div>
  <div class="form-group  col-xs-4" style="margin-left:10px">
    <label for="dateSelector">Date Range:</label>
    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;  height: 28px;">
      <i type="text" id="dateSelector" class="glyphicon glyphicon-calendar fa fa-calendar" name="dateRange"></i>&nbsp;
      <span></span>  <b class="caret"></b>
    </div>
  </div>
  <div class="form-group" style="margin-top:25px; margin-left:10px;">
    <button type="submit" class="btn btn-primary" style="text-align:center;">Search</button>
  </div>
</form>

用于初始化的Javascript：

UpdateDatePickerView(moment().subtract(29, 'days'), moment());

$('#reportrange').daterangepicker({
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
}, UpdateDatePickerView);

  function UpdateDatePickerView(start, end) 
  {
      $('#reportrange span').html(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
  }

它不是input ，提交表单时不会发送。 我将如何获取与表单一起提交的日期选择器数据？

Answer 1

您需要向<form>添加一个隐藏的<input>元素，并用daterangepicker中的值填充它。 请参阅此演示作为指南：

<form method="get">
    <input type="hidden" name="reportrange" id="hd-reportrange"> <!-- check the "reportrange GET value on the server" -->
    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; height: 28px;">
        <i id="dateSelector" class="glyphicon glyphicon-calendar fa fa-calendar" name="dateRange"></i>&nbsp;
        <span></span> <b class="caret"></b>
    </div>
</form> 

<script>
$( '#reportrange' ).daterangepicker(
  {},
  function( start, end, label ) {
    $('#hd-reportrange').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD')); //format this values as you which so the server get the info in a straightforward way.
  }
);
</script>  

祝好运！