javascript - 获取非输入字段，例如表单中的引导日期选择器

Question

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

这是 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'));
  }

它不是输入，并且在提交表单时不会发送。我将如何获取随表单提交的日期选择器数据？

Answer 1

您需要添加隐藏的<input>元素到<form>并用日期范围选择器中的值填充它。看这个demo作为指导:

<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>  

祝你好运!