Categories
Mastering Development

Mulitple Daterangepickers not working on single page

I’m using the daterangepicker library for some filtering on my page. My problem right now is if I add another view into my page that also use the daterangepicker, the daterangepickers on my current page stop working in favour of the other ones.

Main View:

<div class="form-group date-holder">
    <input type="text" readonly placeholder="Date Range" class="date-range-picker form-control" id="chart-date-range-picker"/>
</div>

JS

$('#chart-date-range-picker').on('apply.daterangepicker cancel.daterangepicker', function () {
        alert('apply clicked!');
        drawBatteryLifeChart($('#pills-battery-life canvas')[0]);
    });

Shared View

<div class="form-group m-0">
    @Html.TextBox("DateRangePicker", string.Empty,
        new
        {
            @id = "recent-activity-audit-chart-date-range-picker",
            @class = "date-range-picker form-control dashboard",
            placeholder = "Date_Range",
        })
</div>

Shared View JS

    $('#recent-activity-audit-chart-date-range-picker').on('apply.daterangepicker cancel.daterangepicker', function () {
        activityAuditDelay(function () { activityAuditTable.draw(); }, 0);
    });

Again if I don’t include the shared view into the view I’m currently working on it works perfectly fine, but with it in only the shared view daterangepickers work. Both JS files run on Document.ready, any Help is greatly appreciated!

Thank You

Leave a Reply

Your email address will not be published. Required fields are marked *