Telerik MVC DatePicker Disable days of week

1.6k Views Asked by At

is there a way to have DatePicker allow user to only choose Sunday/Saturday from the popup dates since week starts from Sunday & ends on a Saturday?

I have 2 DatePickers serving as a range (from & to) and the validation is to allow the user to only select a Sunday in the from box and Saturday in the to box.

Any ideas?

2

There are 2 best solutions below

0
On BEST ANSWER

Maybe you can add a jquery event handler for all the links that are week-days (the weekend days have a weekend class on the td) and prevent the default behavior, so whenever you click on them don't do anything. Also you may want to change the style of the weekday values so the user don't get annoyed for clicking and not getting the desired efect

0
On

in aspx add the below code

   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DefaultCS" %>

 <%@ Register TagPrefix="radcln" Namespace="Telerik.WebControls" Assembly="RadCalendar.Net2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>

        <script type="text/javascript">
        function OnDayRender(calendarInstance, args)
        {   
            var jsDate = new Date(args.Date[0], args.Date[1] - 1, args.Date[2]);
            if (jsDate.getDay() != 0)//(jsDate.getDay()!=6) for Saturday 
            {
                var otherMonthCssClass = "otherMonth_" + calendarInstance.Skin;    
                args.Cell.className = otherMonthCssClass; 
                args.Cell.innerHTML = "<span>" + args.Date[2] + "</span>";
                args.Cell.DayId = "";
            }  
        }
        </script>

        <radcln:RadDatePicker ID="RadDatePicker1" runat="server">
            <Calendar OnDayRender="Calendar_OnDayRender">
                <ClientEvents OnDayRender="OnDayRender" />
            </Calendar>
        </radcln:RadDatePicker>        

</div>
</form>

and in cs file

using System;
using System.Web.UI.WebControls;
using Telerik.WebControls;
using Telerik.WebControls.Base.Calendar.Enumerations;

public partial class DefaultCS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
    {
        RadDatePicker1.Calendar.SpecialDays.Clear();
    }
}

protected void Calendar_OnDayRender(object sender, Telerik.WebControls.Base.Calendar.Events.DayRenderEventArgs e)
{
    if (e.Day.Date.DayOfWeek != DayOfWeek.Sunday) //(e.Day.Date.DayOfWeek != DayOfWeek.Saturday) for Saturday
    {
        string calendarSkin = RadDatePicker1.Calendar.Skin != "" ? RadDatePicker1.Calendar.Skin : "Default";
        string otherMonthCssClass = String.Format("otherMonth_{0}", calendarSkin);
        e.Cell.Text = "";
        e.Cell.CssClass = otherMonthCssClass; //set new CssClass for the disabled calendar day cells (e.g. look like other month days here)
        Label label = new Label();
        label.Text = e.Day.Date.Day.ToString();
        e.Cell.Controls.Add(label);
        RadCalendarDay calendarDay = new RadCalendarDay();
        calendarDay.Date = e.Day.Date;
        calendarDay.IsSelectable = false;
        calendarDay.ItemStyle.CssClass = otherMonthCssClass;
        RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);
    }

}

}