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

Background

Three years before I wrote the following article: Disable Future and Past Date in ASP.NET, which had a huge response. Currently, it has 68.2k views. So by considering the same requirement in ASP.NET MVC, I decided to write the same type of article using ASP.NET MVC with the help of the jQuery UI library. So let us implement this requirement step by step.

Step 1. Create an MVC application

1. "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
2. "File", then "New" and click "Project", then select "ASP.NET Web Application Template", then provide the Project a name as you wish and click on OK.
3. Choose the MVC empty application option and click on OK

Step 2. Add model class.

Right-click on the Model folder in the created MVC application add a class named EmpModel and write the following line of code,

EmpModel.cs

public class EmpModel
{
    [Display(Name = "Enter Date")]
    public DateTime EnterDate { get; set; }
}

Step 3. Home controller

Right-click on the Controller folder in the created MVC application and add the controller class,

Now after selecting the controller template, click on the add button then the following window appears.

Specify the controller name and click on the Add button.

HomeController.cs

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}

In the above code, The only action result method named Index handle the user request when the user request for the view named Index. cshtml which will be added later.

Step 4. Reference jQuery UI.

Reference jQuery UI CSS and js library reference as there are many ways to add the reference of jQuery library into our project. The following are some methods,

• Using the NuGet package manager, you can install a library and reference into the project.
• Use the CDN library provided by Microsoft, jQuery, Google, or any other that requires an active internet connection.
• Download jQuery files from jQuery's official website and reference into the project.

In this example, we will use the jQuery CDN library.

As we know how to use jQuery UI calendar we need to use the date picker function and to set or allow a specific date range in the calendar we need to use the following properties of the date picker function.

• yearRange: It sets the year range for calendar control such as how many past and future years to display in the calendar.
• minDate: It sets the minimum date for calendar control.
• maxDate: it sets the maximum date range for calendar control.

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.