MVC jQuery datepicker enable disable dates

jquery disable future dates? jquery disable past dates? disable dates except current month? disable dates before and after a particular dates?

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

CSS files add in header section

 <link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />

 <link href="~/Content/themes/base/core.css" rel="stylesheet" />

 <link href="~/Content/themes/base/theme.css" rel="stylesheet" />

JavaScript files need to be added at the bottom of the layout page

  <script src="~/Scripts/jquery-1.10.2.min.js"></script>

  <script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>

If you don't have these files then run Install-Package jQuery.UI.Combined in package manager. You can change the version number of the file or you can add them into bundle section to create he bundle.

We have everything to add the calendar to any control, let's add the control to a normal input type without any calendar image. It will open the calendar on clicking or getting focus that control.

// HTML
<input type="text" id="OrderDate" class="form-control" placeholder="Order Date" />

// JavaScript at the bottom of the page 
<script>
    $('#OrderDate').datepicker();
</script>

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
});

alt text

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

Let's add the first html to the page

<div class="form-horizontal">
    <div class="form-group">

        <label class="control-label col-md-2">From Date</label>
        <div class="col-md-2">
            <input type="text" id="FromDate" class="form-control" placeholder="From Date" />
        </div>

        <label class="control-label col-md-2">To Date</label>
        <div class="col-md-2">
            <input type="text" id="ToDate" class="form-control" placeholder="To Date" />
        </div>
    </div>
</div>

Now we will try to add the script for calendar

@section scripts{
<script>
    $('#FromDate').datepicker({
        maxDate: "0D",
        onClose: function (selectedDate) {
            $("#ToDate").datepicker("option", "minDate", selectedDate);
        }
    });

    $('#ToDate').datepicker({
        maxDate: "0D",
        onClose: function (selectedDate) {
            $("#FromDate").datepicker("option", "maxDate", selectedDate);
        }
    });
</script>
}

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

alt text

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

<script>
    $('#FromDate').datepicker({
        showOn: "button",
        buttonImage: "/images/calendar_icon.png",
        buttonImageOnly: true,            
        buttonText: "Select from date"
    });

    $('#ToDate').datepicker({
        showOn: "button",
        buttonImage: "/images/calendar_icon.png",
        buttonImageOnly: true,
        buttonText: "Select to date"
    });
</script>

Here is the output of the above change:

alt text

Note: I have not change any HTML, because that is not need, jQuery automatically add the provided image page afte the control.

Format Date:

To format the date we can use dateFormat option with our date format say

  • mm/dd/yy for 03/11/2015
  • yy-mm-dd for 2015-03-11
  • d M y for 11 Mar, 15
  • d MM yy for 11 March, 15
  • DD, d MM, yy for Wednesday, 11 March, 2015
  • 'day' d 'of' MM 'in the year' yy for day 11 of March in the year 2015

Animation: We covered all of the features we need to work for most of the situations, it's time to do some fun work. To animate can use following type of animation

  • show: Show (default)
  • slideDown: To Slide down
  • fadeIn: To Fade in
  • blind: To Blind (UI Effect)
  • bounce: To Bounce (UI Effect)
  • clip: To Clip (UI Effect)
  • drop: To Drop (UI Effect)
  • fold: To Fold (UI Effect)
  • slide: To Slide (UI Effect)

Till now whatever code we used that would be there and add one more line to animate

$("#FromDate").datepicker();
$("#FromDate").datepicker("option", "showAnim", 'bounce');

If you want see all the parameter and option for date picker check jQuery documentation

Common mistake and error:

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>
}
Ali Adravi 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.
  • jquery
  • datepicker
  • mvc
By Ali Adravi On 15 Mar, 15  Viewed: 5,924

Other blogs you may like

Get parent element by jQuery/JavaScript

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,457

jQuery and chexkbox

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: 641

Angularjs jQuery UI Datepicker disable dates conditionally

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: 1,349

Maneuver DOM Elements in ASP.Net with JQuery

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: 567

Rotating banner simplest way with jquery and css

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,003