Creating a Custom Date Picker in jQuery with Validation

Date pickers are essential in web applications for collecting data inputs from users. jQuery makes it simple to implement a date picker with custom validations. In this article, we'll walk through how to create a custom date picker using jQuery, which includes setting a date range and ensuring that users can only select dates within the allowed period.

Step 1. HTML Structure

Let's start with the HTML structure. We'll use two text boxes to represent the "From Date" and "To Date" fields.

<tr>
    <td style="text-align: right; width: 21%">From Date:</td>
    <td style="text-align: left; width: 25%">
        <asp:TextBox ID="Fromdate" runat="server" CssClass="form-control"></asp:TextBox>
    </td>
    <td style="text-align: right; width: 20%">To Date:</td>
    <td style="text-align: left; width: 30%">
        <asp:TextBox ID="Todate" runat="server" CssClass="form-control"></asp:TextBox>
    </td>
</tr>

Here, we have two TextBox controls for date input, Fromdate and Todate.

Step 2. Adding jQuery Datepicker

Next, we initialize the jQuery Datepicker on these text boxes. The Datepicker allows users to pick dates from a calendar popup.

$(function () {
    var hdnFromDate = $("#<%=hdnFromDate.ClientID %>");
    var hdnToDate = $("#<%=hdnToDate.ClientID %>");
    var hdnFromdatetext = $("#<%=hdnFromdatetext.ClientID %>");
    var hdnToDatetext = $("#<%=hdnToDatetext.ClientID %>");
    // Get current date and 7 days prior
    var currentDate = new Date();
    var previousDate = new Date();
    previousDate.setDate(currentDate.getDate() - 7);
    // Initialize datepickers with the correct dates
    $("#<%= Fromdate.ClientID %>").datepicker({
        dateFormat: "yy-mm-dd",
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        defaultDate: previousDate,
        maxDate: currentDate,
        onSelect: function (dateText, inst) {
            var selectedDate = new Date(dateText);
            $("#<%= Todate.ClientID %>").datepicker("option", "minDate", selectedDate);
            hdnFromdatetext.val(dateText);
            hdnFromDate.val(dateText);
        }
    }).datepicker("setDate", hdnFromdatetext.val() === "0" ? previousDate : hdnFromdatetext.val());
    $("#<%= Todate.ClientID %>").datepicker({
        dateFormat: "yy-mm-dd",
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        defaultDate: currentDate,
        maxDate: currentDate,
        onSelect: function (dateText, inst) {
            var selectedDate = new Date(dateText);
            $("#<%= Fromdate.ClientID %>").datepicker("option", "maxDate", selectedDate);
            hdnToDatetext.val(dateText);
            hdnToDate.val(dateText);
        }
    }).datepicker("setDate", hdnToDatetext.val() === "0" ? currentDate : hdnToDatetext.val());
});

Explanation

1. Initialization: The date pickers are initialized on Fromdate and Todate with a date format of "yy-mm-dd".
2. Default Dates: The Fromdate field defaults to 7 days before the current date, and the Todate field defaults to the current date.
3. Validation
   • The Fromdate picker ensures that the selected date is not after the Todate.
   • The Todate picker ensures that the selected date is not before the Fromdate.

Step 3. Storing Dates in Hidden Fields

The dates are stored in hidden fields to maintain the selected dates across postbacks.

<asp:HiddenField runat="server" ID="hdnFromDate" Value="0" />
<asp:HiddenField runat="server" ID="hdnToDate" Value="0" />
<asp:HiddenField runat="server" ID="hdnFromdatetext" Value="0" />
<asp:HiddenField runat="server" ID="hdnToDatetext" Value="0" />

These hidden fields store the date values so that they can be retrieved and used even after a page refresh or form submission.

Conclusion

By following the steps outlined above, you can implement a custom date picker with validation in jQuery, ensuring users select valid date ranges. This approach is useful for applications that require date inputs, such as booking systems or report filters.