时间戳

首页 > 解决方案 > 使用 daterangepicker 中的日期数据自动提交表单

javascript - 使用 daterangepicker 中的日期数据自动提交表单

问题描述

我有这个脚本几乎可以工作。我想要的是选择日期时，使用所需数据自动提交表单。此脚本当前拆分日期并将它们放在隐藏的输入字段中。然后它搜索数据库并显示结果。很简单，对。

我通宵阅读，明白了这一点。我遇到的问题是表单提交但不包含数据。 

<script>
$('input.date_range').daterangepicker({
  "alwaysShowCalendars": true,
  "showDropdowns": true,
  autoApply:true,
  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')]
 },



 });

$('form').submit(function (ev, picker) {
    [startDate, endDate] = $('.date_range').val().split(' - ');
    $(this).find('input[name="datemin"]').val(startDate);
    $(this).find('input[name="datemax"]').val(endDate);
});

$("input.date_range").change(function() {
    console.log($("input.date_range").val());
    $('form').delay(200).submit();
});

这部分在这里$("input.date_range").change(function() { console.log($("input.date_range").val()); $('form').delay(200).submit(); });提交表单就好了。只是没有发送数据。

我试过这样：



$("input.date_range").change(function() {
$('form').submit(function (ev, picker) {
    [startDate, endDate] = $('.date_range').val().split(' - ');
    $(this).find('input[name="datemin"]').val(startDate);
    $(this).find('input[name="datemax"]').val(endDate);
});

    console.log($("input.date_range").val());
    $('form').delay(200).submit();
});

但这不起作用。不过，日期范围会发送到控制台。

我知道我很接近。只是在这里遗漏了一些东西。任何帮助表示赞赏。

测试答案：

$('input.date_range').daterangepicker(
  // Options
  {
    "alwaysShowCalendars": true,
    "showDropdowns": true,
    autoApply:true,
    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')]
    }
  },
  // Callback
  function form_submit(){
    $('form').submit(function (ev, picker) {
        [startDate, endDate] = $('.date_range').val().split(' - ');
       $(this).find('input[name="datemin"]').val(startDate);
       $(this).find('input[name="datemax"]').val(endDate);
    });
}
$("input.date_range").change(function() {

    console.log($("input.date_range").val());
    $('form').trigger('submit');
});
  }
);

以上不工作

这也行不通。它提交但数据未传递到输入字段。

$('input.date_range').daterangepicker(
  // Options
  {
    "alwaysShowCalendars": true,
    "showDropdowns": true,
    autoApply:true,
    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')]
    }
  },
  // Callback
  function(start, end){ // start, end being the values of date range
      $(this).find('input[name="datemin"]').val(start);
      $(this).find('input[name="datemax"]').val(end);

      $('form').delay(200).submit(); // You can remove the delay too
  }
);

我想要实现的是以下而不点击提交。 https://jsfiddle.net/4mk3s5d6/1/

标签： javascriptjquery

解决方案

我将在这里展示完整的代码。

HTML 代码：

<form method='post' id="dateForm">
   <div id="reportrange">
      <i class="fa fa-calendar"></i>&nbsp;
      <span></span> <i class="fa fa-caret-down"></i>
      <input type="submit" id='btn-form' style='display: none;'>
   </div>
</form>

jQuery代码：

<script type="text/javascript">
$(function() {
   var start = moment().subtract(1, 'days');
   var end = moment();
   function cb(start, end) {
      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
   }

   $('#reportrange').daterangepicker({
      startDate: start,
      endDate: end,
      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);

      cb(start, end);
   });

   $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
   //do something, like clearing an input
     $('#btn-form').click();
    });
 </script>

当您应用事件启用时，您可以简单地单击提交按钮。

推荐阅读