时间戳

首页 > 解决方案 > 如何在 jquery 中使用 onchange 事件触发 datarangepicker 事件？

jquery - 如何在 jquery 中使用 onchange 事件触发 datarangepicker 事件？

问题描述

我正在为多个 id 调用更改事件，但是当涉及到 daterange 时它不起作用。我如何调用日期范围选择器的事件？

$(document).on('change daterangepicker', '#sell_list_filter_location_id, #sell_list_filter_customer_id, #sell_list_filter_payment_status, #created_by, #sales_cmsn_agnt, #service_staffs' , '#sell_list_filter_date_range', function () {
            var location_id = $('#sell_list_filter_location_id').children("option:selected").val();
            var customer = $('#sell_list_filter_customer_id').children("option:selected").val();
            var payment_status = $('#sell_list_filter_payment_status').children("option:selected").val();
            var created_by = $('#created_by').children("option:selected").val();
            var start = $('#sell_list_filter_date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var end = $('#sell_list_filter_date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
            alert()
            $.ajax({
                url: '{{url('/api/final_total_price')}}',
                data: {
                    location_id: location_id,
                    customer: customer,
                    payment_status: payment_status,
                    created_by: created_by
                },
                type: "GET",
                dataType: "json",
                success: function (d) {
                    var final_total = d[0].final_total;
                    $('.final_total_price').html('Total sale price : ' + round(final_total, 2));
                }
            });
        });

我的 HTML 我正在使用 yajra 数据表 下面是我调用事件的过滤器。付款状态事件工作正常。但我想调整日期选择器的更改事件

    <div class="col-md-3">
    <div class="form-group">
        <label for="sell_list_filter_payment_status">Payment Status:</label>
        <select class="form-control select2" style="width:100%" id="sell_list_filter_payment_status" name="sell_list_filter_payment_status"><option selected="selected" value="">All</option><option value="paid">Paid</option><option value="due">Due</option><option value="partial">Partial</option><option value="overdue">Overdue</option></select>
    </div>
</div>
<div class="col-md-3">
    <div class="form-group">
        <label for="sell_list_filter_date_range">Date Range:</label>
        <input placeholder="Select a date range" class="form-control" readonly name="sell_list_filter_date_range" type="text" id="sell_list_filter_date_range">
    </div>
</div>

标签： jqueryajax

解决方案

尝试在您的代码中使用最新的 jquery。你的代码工作正常

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$('input[name="sell_list_filter_date_range"]').daterangepicker({
   locale: {
      format: 'YYYY-MM-DD'
    }
});

  $(document).on("change", '#sell_list_filter_date_range, #sell_list_filter_payment_status', function()    {
    var val = $(this).val();
    var selected_date = $("#sell_list_filter_date_range").val();
    var splitted_date = selected_date.split(' - ');
    var startdate = splitted_date[0];
    var enddate = splitted_date[1];
    alert('Start Date : '+startdate+'. End Date : ' + enddate);
    //do your code here
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

 <div class="col-md-3">
    <div class="form-group">
        <label for="sell_list_filter_payment_status">Payment Status:</label>
        <select class="form-control select2" style="width:100%" id="sell_list_filter_payment_status" name="sell_list_filter_payment_status"><option selected="selected" value="">All</option><option value="paid">Paid</option><option value="due">Due</option><option value="partial">Partial</option><option value="overdue">Overdue</option></select>
    </div>
</div>
<div class="col-md-3">
    <div class="form-group">
        <label for="sell_list_filter_date_range">Date Range:</label>
        <input placeholder="Select a date range" class="form-control" readonly name="sell_list_filter_date_range" type="text" id="sell_list_filter_date_range">
    </div>
</div>

推荐阅读