Javascript 日期范围选择器检索单独输入中的值

我正在使用谷歌图表绘制一些报告图表，但我需要允许用户选择日期范围。我是个新手，所以我可能会用最愚蠢的方式来做

我的想法如下：

步骤1：使用daterangepicker（我正在使用这个：）获得所需的范围

第二步：“好的，我显示了这个范围，我该怎么处理它？”于是我想，“嘿，我将尝试分割文本，并将其发送到两个单独的date类型表单输入。在选择范围后按下apply按钮时，我不知道该如何操作，所以我使用的是submit按钮。这个想法是在我按下submit按钮的同时传递值并发布（不确定这是否有效）

步骤3：发布输入值并将其作为参数发送到我的模型，然后使用更新后的查询将图表更新到mySQL数据库

问题是，我非常确定有更好的方法可以做到这一点，例如，使用ajax，这样我就不需要重新加载页面（请记住，这就是我对ajax的了解，我是编程专业的一年级学生，没有编程背景）。我正在使用Codeigniter与服务器通信

以下是我视图中日期选择器的代码：

  <div class="container">
  <div id="reportrange" class="col-sm-3 " style="background: #fff; cursor:pointer; padding: 5px 10px; border: 1px solid #ccc; ">
     <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
     <span id="thespan"></span> <b class="caret"></b>
  </div>

  <input type="date" id="dStart" name="dStart" value="" />
  <input type="date" id="dEnd" name="dEnd" value="" />
  <input onclick="myFunction()" type="submit" value="Submit" class="btn btn-primary"/>

</div>


<script>
  function myFunction() {
    var str = document.getElementById("thespan").innerHTML;
    var res = str.slice(0, 10);
    document.getElementById("dStart").value = res;
    var res2 = str.slice(13, 23);
    document.getElementById("dEnd").value = res2;
 }
</script>




<script type="text/javascript">
  $(function() {

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

    }

    cb(moment().startOf('week'), 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')]
        }
    }, cb);

});
</script>

函数myFunction（）{
var str=document.getElementById（“thespan”）.innerHTML；
var-res=str.slice（0,10）；
document.getElementById（“dStart”）.value=res；
var res2=str.slice（13,23）；
document.getElementById（“dEnd”）.value=res2；
}
$（函数（）{
功能cb（开始、结束）{
$（'#reportrange span'）.html（start.format（'YYYY-MM-DD'）+'-'+end.format（'YYYY-MM-DD'））；
}
cb（时刻（）.startOf（'week'），时刻（））；
$（“#reportrange”）.daterangepicker({
范围：{
“今天”：[时刻（），时刻（）]，
“昨天”：[moment（）.subtract（1，'天'），moment（）.subtract（1，'天'）]，
“过去7天”：[力矩（）.减去（6，'天'），力矩（）]，
“过去30天”：[力矩（）.减去（29，'天'），力矩（）]，
“本月”：[moment（）.startOf（'Month'），moment（）.endOf（'Month'），
‘上个月’：[moment（）.subtract（1，'Month'）.startOf（'Month'），moment（）.subtract（1，'Month'）.endOf（'Month'）]
}
}，cb）；
});

下面是我的模型中的代码：

public function tester($startDate,$endDate) {

  $this->db->where('type_id', 7);
  // $this->db->where('entry_date >', '2016-05-11');
  // $this->db->where('entry_date <', 'curdate()', FALSE);
  $this->db->where('entry_date >=', '$startDate');
  $this->db->where('entry_date <=', '$endDate');
  $this->db->select('first_name, last_name, count(type_id) AS totals');
  $this->db->from('entries');
  $this->db->join('users', 'users.user_id = entries.user_id');
  $this->db->group_by('entries.user_id');
  $this->db->order_by('totals', 'DESC');
  $this->db->limit(3);
  $query = $this->db->get();

  return $query->result();

}

公共功能测试仪（$startDate，$endDate）{
$this->db->where（'type_id'，7）；
//$this->db->where（'entry_date>，'2016-05-11'）；
//$this->db->where（'entry_date='，'$startDate'）；
$this->db->where（'entry\u date