MENU

Disable Past And Future Dates of jQuery UI Calendar

Filed Under: , , , , on
Three years before I wrote the following article: Disable Future and past date in ASP.NET, which has huge response. Currently it has 68.2 k views. So by considering the same requirement in ASP.NET MVC I decided to write same type of article using ASP.NET MVC with the help of 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.

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 NuGet package manager, you can install library and reference into the project.
  • Use CDN library provided by Microsoft, jQuery, Google or any other which requires active internet connection.
  • Download jQuery files from jQuery official website and reference into the project.
In this example we will use jQuery CDN library.

 As we know how to use jQuery UI calendar we need to use datepicker function and to set or allow specific date range in calendar we need to use the following properties of datepicker function,
  • 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 mouse pointer into the textbox the calendar control will popup as in the following screenshot,
 
In the above screenshot you can see that only current date is enabled and all other dates are disabled. Now let us change the maxDate property to enable only five days from 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 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 CDN library then it requires 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