MENU

Disable Past And Future Dates of Calendar In ASP.NET MVC

Filed Under: , , , , on
Three years ago, I wrote the following article:  Disable Future and Past Date in ASP.NET, which has had a huge response. It has currently received 68.2 million 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.
  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 MVC empty application option and click on OK
Step 2: Add model class.
Right click on Model folder in the created MVC application and add 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 Controller folder in the created MVC application and add the controller class,




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





Specify the controller name and click on 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.

As there are numerous ways to incorporate the jQuery library into our project, we will refer to the jQuery UI CSS and Js library reference. The following are some methods.
  • Using the NuGet package manager, you can install the library and reference it in the project.
  • Use the CDN library provided by Microsoft, jQuery, Google or any other which requires an active internet connection.
  • Download jQuery files from the official website and reference them in the project.
In this example, we will use the jQuery CDN library.

To learn how to use jQuery UI calendar, we must first understand the datepicker function. To set or allow a specific date range in the calendar, we must use the datepicker function's following properties: ,
  • yearRange: It sets the year range for calendar control such as how many past and future years to display in calendar.
  • minDate :  It sets the minimum date for calendar control .
  • maxDate : it sets the maximum date range for calendar control .
Step 5: Create jQuery function to invoke datepicker 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 as,
<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 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 popup 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 the jQuery UI calendar control in ASP.NET MVC.

Note:
  • 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.

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode