Add, enable, disable dates to datepicker control is really more than easy but I found most beginners struggle with it to add datepicker with a control or to enable and disable dates for a particular condition. In this article we will learn how to add datepicker without any calendar icon as well as with calendar icon. Disable dates which are less than today's date, disable dates which are greater than today's date. Enable date which are one month back or two month latter. There could be many conditions, don't need to discuss every situation here, after learning how we can disable date by using min and max we can achieve any condition.

First of all we need to add the required JavaScript files to render the calendar

Note we used the Id of the control and added calendar to it, is not it more than easy :) in the same way we can add as many controls as we want, so a single for every control, that's it.

To disable date after one month one week, without any minimum date

$('#OrderDate').datepicker({ maxDate: "+1M 1W" });

To disable the date range, say we want to show the option to select date from last one month only:

$('#OrderDate').datepicker({ minDate: "-1M", maxDate: "+0D" });

To disable date between 10 day before to 10 days latter then

$('#OrderDate').datepicker({ minDate: "-10D", maxDate: "+10D" });

In some situations we want to show more than one month calendar, let's say we want to give the option to show three months calendar at a time then

$('#OrderDate').datepicker({
changeMonth: true,
numberOfMonths: 3
});

Date Range Selection:

Say we have a search page to use from and to date to search the result, it is obvious to all the user to select from date which shold not be the greater than current date and to date must not be less than from date and greater than current date. Let's see if we can achieve it easily or not

If you will notice there nothing magical but we try to add minimum date for ToDate on selecting the from date and on selecting the to date we are adding the maxDate date for FromDate. We already set the max date for both the control to current date by using 0D as the maximum date because we don't want to allow the user to select greater than current date. Here is the out put

Select any date into "From Date"", it will be the minimum date for "To Date".
Select any date into "To Date", it will be maximum date for "From Date", means it is working as we want.

How to use the calendar image: to open the calendar and select date for the text box and make the text box read only so user cannot enter the date manually. We need calendar image, I created a new folder images and added a new calendar image in it and change the code to add the calendar button, see this

We use our script at the bottom of the page, which renders into the body of the layout means before the jQuery files added to the page and gives error Uncaught ReferenceError: $ is not defined. To avoid it, always write your script in to @section scripts like this, it will always add you script at the very bottom of the page after adding all script files on our layout page.

@section scripts{
<script>
$('#OrderDate').datepicker();
</script>
}

Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.

Other blogs you may like

We can use JavaScript to get parent element or jQuery to get parent element but which one would be best for you is up to your need and familiarity with JavaScript and jQuery. In this article we will take different conditions and examples to show how jquery finds parent element and same case with...
By Hamden
On 06 Apr 2013
Viewed: 8,977

Whenever I need to use jquery with checkbox different functionality I always search for different sites to get my answer so I decided to write a small article to keep all the jquery functionality with checkbox at a single place, so trying to keep everything here.
***To get a checkbox on a page...
By Ali Adravi
On 16 Nov 2012
Viewed: 708

Angularjs jquery calendar with minimum code to attach datepicker, how to extend to restrict the dates from a particular day, month or year, how to make calendar to validate start and end date from one control to other after user selection, how to format date before rendering or how to disable...
By Ali Adravi
On 26 Dec 2017
Viewed: 2,004

JQuery, a popular open source JavaScript library, is CSS3 compliant. With JQuery, you can easily maneuver the DOM elements in your web page. Basically, it allows you to add/delete DOM elements to your HTML based content.
If you want to manipulate the DOM elements using JQuery and Visual Studio,...
By Deepa Ranganathan
On 31 Aug 2015
Viewed: 622

Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two...
By Ali Adravi
On 18 Apr 2015
Viewed: 5,408