JQuery  

Building a User-Friendly Date Range Filter Using jQuery and Moment.js in ASP.NET Core MVC

In many modern web applications, especially admin dashboards, filtering data by date is critical to improving both usability and performance. Rather than loading all records at once, allowing users to select a specific date range helps the system run faster, cleaner, and more efficiently.

In this article, we will walk through building a Date Range Picker that users can interact with to filter data based on the selected date range. We’ll implement this using jQuery, Moment.js, and Bootstrap — a solution commonly used in ASP.NET Core MVC applications.

Objective

The main goal of this guide is to implement a Date Range Picker in an ASP.NET Core MVC application, allowing users to filter data (such as order lists or transaction history) between specific start and end dates.

The Date Range Picker will provide:

  • A user-friendly UI

  • Controlled date selection

  • Backend-ready formatted values

  • Reduced user input errors

Key Features of the Date Range Picker

  • User-Friendly UI: A calendar icon combined with a text input field

  • Auto Date Formatting: Uses Moment.js to format dates

  • Predefined Ranges: "Last 30 Days", "Month to Date", "Quarter to Date", etc.

  • Backend-Friendly Format: Stores dates in YYYY-MM-DD format for database queries

  • Reset Option: Quickly reset to the last 30 days

  • No Manual Date Entry: Prevents format-related user errors

Step-by-Step Guide to Building the Date Range Picker

1. HTML Structure

We begin by setting up the HTML structure. This includes:

  • A visible input field to display the selected date range

  • Two hidden fields to store backend-friendly start and end dates

<div class="daterange-wrapper">
    <i class="fa fa-calendar"></i>
    <input type="text"
           id="daterange"
           class="form-control daterange-input"
           readonly />
</div>

<input type="hidden" id="StartDate" />
<input type="hidden" id="EndDate" />

Explanation:

  • #daterange displays the formatted date range for users.

  • #StartDate and #EndDate store dates in YYYY-MM-DD format for API or database queries.

2. Initialize Date Range Picker Using jQuery and Moment.js

Next, initialize the Date Range Picker using Moment.js and the jQuery daterangepicker plugin.

$(function () {
    var today = moment();
    var start = moment().subtract(29, 'days');
    var end = today.clone();

    $('#daterange').daterangepicker({
        startDate: start,
        endDate: end,
        minDate: moment('1900-01-01'),
        maxDate: today,
        autoUpdateInput: true,
        showDropdowns: true,
        alwaysShowCalendars: true,
        opens: 'right',
        locale: {
            format: 'DD MMM YYYY',
            cancelLabel: 'Cancel'
        },
        ranges: {
            'Last 30 Days': [moment().subtract(29, 'days'), today],
            'Last 2 Months': [moment().subtract(2, 'months'), today],
            'Last 3 Months': [moment().subtract(3, 'months'), today],
            'Last 12 Months': [moment().subtract(12, 'months'), today],
            'Month to Date': [moment().startOf('month'), today],
            'Quarter to Date': [moment().startOf('quarter'), today]
        }
    });
});

Configuration Breakdown:

  • ranges: Provides predefined date selections.

  • minDate and maxDate: Restricts date selection between January 1, 1900 and today.

  • locale.format: Ensures consistent display format (DD MMM YYYY).

3. Capture Selected Date Range

When a user selects a range, store the values in hidden fields for backend processing.

$('#daterange').on('apply.daterangepicker', function (ev, picker) {
    $(this).val(
        picker.startDate.format('DD MMM YYYY') + ' - ' + picker.endDate.format('DD MMM YYYY')
    );
    $('#StartDate').val(picker.startDate.format('YYYY-MM-DD'));
    $('#EndDate').val(picker.endDate.format('YYYY-MM-DD'));
});

Explanation:

  • apply.daterangepicker triggers when a user confirms selection.

  • Dates are stored in YYYY-MM-DD format for SQL queries or API calls.

4. Reset the Date Range Picker

If the user clicks cancel, reset the picker to the default last 30 days.

$('#daterange').on('cancel.daterangepicker', function () {
    var start = moment().subtract(29, 'days');
    var end = moment();

    $(this).data('daterangepicker').setStartDate(start);
    $(this).data('daterangepicker').setEndDate(end);

    $(this).val(
        start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY')
    );

    $('#StartDate').val(start.format('YYYY-MM-DD'));
    $('#EndDate').val(end.format('YYYY-MM-DD'));
});

Explanation:

  • cancel.daterangepicker resets the control to the default range.

  • Ensures consistent behavior without requiring a page refresh.

5. Styling the Date Range Picker

To make the Date Range Picker visually distinct, apply the following CSS:

.daterange-wrapper {
    position: relative;
}

.daterange-wrapper i {
    position: absolute;
    left: 12px;
    top: 37%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 16px;
    z-index: 2;
}

.daterange-input {
    padding-left: 40px;
    background-color: #e63946;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    border: none;
}

Styling Highlights:

  • The calendar icon is positioned inside the input field.

  • The input background color enhances visibility.

  • Padding ensures text does not overlap the icon.

Conclusion

In this article, we built a user-friendly Date Range Picker using jQuery, Moment.js, and Bootstrap for an ASP.NET Core MVC application.

Key Benefits

  • Improved User Experience: Eliminates manual date entry and reduces errors

  • Flexible Date Ranges: Predefined ranges speed up common searches

  • Backend-Friendly Format: Dates are stored in a SQL-compatible format

  • Consistent UI: Clean, intuitive, and visually distinct input control

By implementing this Date Range Picker, your ASP.NET Core MVC applications become more intuitive and efficient, allowing users to filter and view data seamlessly.

Membership not found