Disable jQuery UI Calendar Past And Future Date In ASP.NET MVC

Step 5. Create a jQuery function to invoke the date picker function.

$(document).ready(function() {
    $("#EnterDate").datepicker({
        dateFormat: "dd-mm-yy",
        minDate: -0,
        maxDate: "+0M +0D"
    });
});

For making the above function yo work don't forget to add the reference of the following jQuery CDN library.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Step 6. Add View

Add strongly typed view named index from EmpModel class as.

After adding necessary code, files, and logic to the Index.cshtml code will look like the following.

Index. cshtml

@model DissablePastandFutureDateInMVC.Models.EmpModel

@{
    ViewBag.Title = "www.compilemode.com";
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
    $(document).ready(function() {
        $("#EnterDate").datepicker({
            dateFormat: "dd-mm-yy",
            minDate: -0,
            maxDate: "+0M +0D"
        });
    });
</script>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.EnterDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EnterDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EnterDate, "", new { @class = "text-danger" })
            </div>
        </div>

        
    </div>
}

Now run the application and put the mouse pointer into the textbox the calendar control will pop up as in the following screenshot.

In the above screenshot, you can see that only the current date is enabled and all other dates are disabled. Now let us change the maxDate property to enable only five days from the current date.

$(document).ready(function() {
    $("#EnterDate").datepicker({
        dateFormat: "dd-mm-yy",
        minDate: -0,
        maxDate: "+0M +4D"
    });
});

Now run the application the output will be as follows.

In the preceding screenshot, you can see that only five dates are available including the current date. From all the preceding examples, I hope you learned how to disable past and future dates using jQuery UI calendar control in ASP.NET MVC.

Note

• For the detailed code, please download the sample zip file.
• You need to use the jQuery library and if you are using the CDN library then it requires an active internet connection.

Summary

I hope this article is useful for all readers. If you have a suggestion then please contact me.