How to trigger datarangepicker event with onchange event in jquery?

user_14575664 0
Viewed 191

I'm calling change event for multiple ids, but when it comes to daterange it does not working. how can i call event for daterange picker ?

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

My HTML I'm using yajra datatable Below are the Filters from where i call event. event for payment status works fine. but i want to adjust change event for datepicker

    <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>
jquery ajax
1 Answers

try to use latest jquery in your code. Your code is working fine

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

user_61088820
Related