Validating Dates using Calendar Extender and Javascript ASP.NET

Question

how can I use Javascript to disable Saturdays and Sundays in my Calendar Extender.

Right now, I am using the code behind to disable the previous date like in this page load.

public partial class TESTING : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        txtDelivery_CalendarExtender.StartDate = DateTime.Now;
    }
}

ASP.NET Controls

<asp:TextBox ID="txtDelivery" runat="server"></asp:TextBox>

<asp:CalendarExtender ID="txtDelivery_CalendarExtender" runat="server" 
    PopupButtonID="ImageButton1" TargetControlID="txtDelivery" >
</asp:CalendarExtender>

<asp:ImageButton ID="ImageButton1"
    runat="server" ImageUrl="~/Images/Calendar.png" />

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

Also, I would like to disable specific range of days from today.

For example, if today is November 4, 2012, and I want to have 10 working days, then the dates between November 4 to 14 should be disabled.

Thanks in advance.

Tariqulazam · Accepted Answer · 2012-11-04T21:15:02.727

For disabling the weekend, modify your control markup like below

<asp:CalendarExtender ID="txtDelivery_CalendarExtender" runat="server" 
    PopupButtonID="ImageButton1" TargetControlID="txtDelivery" OnClientShown="DisableWeekend" >
</asp:CalendarExtender>

And use the following javascript

function DisableWeekend(sender, args) {
        $(".ajax__calendar_day[title*='Saturday'],.ajax__calendar_day[title*='Sunday']").each(function () {
            $(this).parent().addClass('ajax__calendar_invalid');
        });
}

If you need granular control over the functionality of the calendar control through javascript, I would suggest to have a close look at the CalendarBehavior.js file.

Thanks for your reply. But the weekends are still enabled. I have modified the control mark up like the one you posted above. Thanks — Charles Tan, Nov 08 '12 at 06:11

score 0 · Answer 2 · answered Nov 08 '12 at 07:56

You can try these:

Javascript

function DisableWeekends(sender, args)
{
     for(var i=0; i<sender._days.all.length; i++)
    {
              for(var j=0; j<6; j++)
             {
                    if(sender._days.all[i].id == “calendarValidToDate_day_”+j+”_0″)
                   {
                          sender._days.all[i].disabled = true;
                          sender._days.all[i].innerHTML = “<div>” +sender._days.all[i].innerText+ “</div>”;
                    }

                    if(sender._days.all[i].id == “calendarValidToDate_day_”+j+”_6″)
                   {
                            sender._days.all[i].disabled = true;
                            sender._days.all[i].innerHTML = “<div>” +sender._days.all[i].innerText+ “</div>”;
                   }
            }
     }
}

.aspx

<asp:TextBox ID=”txtDate” Enabled=”true” runat=”server” Width=”200px” />
<asp:ImageButton runat=”server” ID=”imageValidToDate” SkinID =”calendarButton” />
<asp:CalendarExtender ID =”calendarValidToDate” runat=”server”
    TargetControlID=”txtDate” Format=”dd/MM/yyyy” PopupButtonID =”imageValidToDate”
    FirstDayOfWeek=”Default” OnClientShown=”DisableWeekends”>
</asp:CalendarExtender>

Validating Dates using Calendar Extender and Javascript ASP.NET

2 Answers2