Disable dates in Ajax CalendarExtender

Ajax CalendarExtendar: I found many questions on different sites regarding date range selection in Ajax CalendarExtender, while it is quite simple to bound the range to select from, you can allow all the dates, disable past dates, disable date greater than current date, date should be greater than current date + 1 month, current date to 1 month etc.

So let me explain one by one:

For all dates

It's default behavior of Ajax CalendarExtender so no need to add any start or end date, here is the code

<ajax:CalendarExtender ID="CalendarExtender1" runat="server" 
           TargetControlID="txtSateDate"
           PopupButtonID="imgSateDate"
           CssClass=".cal_Calendar" />

For date greater than to year 2012

It means date should be greater than 01/01/2012, right.

Simply add StartDate = "01/01/2012", here is the code:

<ajax:CalendarExtender ID="CalendarExtender1" runat="server" 
           TargetControlID="txtSateDate"
           PopupButtonID="imgSateDate"
           StartDate = "01/01/2012"
           CssClass=".cal_Calendar" />

For date range If you want to define the minimum and maximum date then use StartDate as well as EndDate, for example from 01/01/2012 to 12/31/2020, here is the code:

<ajax:CalendarExtender ID="CalendarExtender1" runat="server" 
           TargetControlID="txtSateDate"
           PopupButtonID="imgSateDate"
           StartDate = "01/01/2012"
           EndDate = "12/31/2020"
           CssClass=".cal_Calendar" />

Till now we discussed how to use the fixed date, from a particular date to a particular date, suppose I want to allow to select a date which can be greater than equal to current date but can not be more than one month. In that case we can not use the hard coded date but we would have to write the code in our code behind file: In Page_Load method define the start date and end date

protected void Page_Load(object sender, EventArgs e)
{
      CalendarExtender1.StartDate = DateTime.Today;
      CalendarExtender1.EndDate = DateTime.Today.AddMonths(1);
}

We discussed how to disable dates, we are fine till now but when you will run the application and open the calender it will work fine as you have defined but no indication which dates are enabled and which are disabled. So we need to fix our CSS so it can indicate the disabled dates. Let's do the CSS changes; If you will check your CSS file it will have these lines there:

.cal_Calendar .ajax__calendar_title,
.cal_Calendar .ajax__calendar_next,
.cal_Calendar .ajax__calendar_prev   
 {
    color: #004080;
    padding-top: 3px;
}

Add one more line on the top

 .cal_Calendar .ajax_calendar_invalid .ajax_calendar_day,
  /* Add class for your Invalid dates*/
  .ajax_calendar_invalid 
  { 
       color:red;  text-decoration:strike; cursor:pointer;
  }

And now refresh the page and open the calendar, it will look like this:

In some case we need to show only date and month say 05/21 or month and year say 07/2012 so is there any way that whatever date use is selecting show only date and month or month and year?, yes, we need to use format property to adjust our requirement and format. // For date and month only

// For Month and year only
<ajax:CalendarExtender ID="CalendarExtender1" runat="server" 
       TargetControlID="txtSateDate"
       PopupButtonID="imgSateDate"
       Format = "MM/yyyy"
       CssClass=".cal_Calendar" />

After setting the format, once we will select any date, it will so only dd/MM or MM/yyyy in our associated text boxes.

If you are using jQuery date picker then see MVC jQuery datepicker enable disable dates

Other blogs you may like

No action was found on the controller that matches the request

How to post the data from json, in Angularjs $http.post we get this error. why we get this error only when we try to post the json object rather than query string. When we pass the parameter in query string same action method works as it should be. It's a very simple article so we are going to... By Ali Adravi   On 12 Jul 2015  Viewed: 17,872

Using Ajax for Update a View and then Update Data

this blog has been... By Amin Rahdar   On 26 May 2015  Viewed: 343

Ajax Roundedcornersextender padding and margin problem

Ajax Rounded corners extender is used to give corner to any elements like panel and div etc. Most of the time you will need to give the padding to give some space between the border and content, same is used for margin to give some vertical and horizontal space between different controls, but if... By Alicia Gonzalez   On 15 Jun 2013  Viewed: 861

Ajax AsyncFileUpload control example in asp.net to upload only images

Ajax introduced two new controls AsyncFileUpload and SeaDragon, in this article we will see about Asynchronous file upload control, with its different properties and usage. 1. [AsyncFileUpload][1]: by using this control we can upload a file asynchronously (without postback). The file uploading... By Ali Adravi   On 20 May 2013  Viewed: 6,710

Ajax fill country state and city without postback in asp.net

Country will be filled on page load and once user will select any country we will fill states from that country and again when user will change state we will fill city for that state without postback ( asynchronously) with the help of update panel in asp.net. Create three methods to fetch... By Hamden   On 04 May 2013  Viewed: 6,195