Question

我正在使用谷歌图表绘制一些报告图表，但我需要允许用户选择日期范围。我对此很陌生，所以我可能会以最愚蠢的方式做到这一点。

我的想法如下：

步骤1：使用daterangepicker（我正在使用这个：http://www.daterangepicker.com/）来获得所需的范围。

第2步：“好的，所以我显示了这个范围，我该怎么办呢？”所以我虽然，“嘿，我会尝试切片文本结束发送到2个单独的表格输入类型日期。我无法弄清楚如何在选择范围后按应用按钮时这样做，所以我正在使用提交按钮。想法是传递值并在我按下提交按钮的同时发布它（不确定这是否会起作用）。

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

事情是，我很确定有更好的方法来做到这一点，例如，使用ajax，所以我不需要重新加载页面（请记住，这几乎是我所知道的关于ajax，我是第一年没有编程背景的编程学生。我正在使用Codeigniter与服务器通信。

以下是我视图中datepicker的代码：

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

这是我模型中的代码：

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();

}

我看到使用日期范围选择器的示例，我无法在网上找到对我的怀疑的答案，这使我认为解决方案可能比我想要做的更简单。我想就如何处理这个问题得到你的意见，请记住我有基本的php和mySQL知识，几乎没有js知识。是的，我愿意学习，而且我每天都在学习，但我正在开发的这个应用程序是为了我的实习，所以我不能花很长时间来完成它。

提前致谢。

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

0 个答案: