Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

disable dates

4 Answers 321 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 2
Veteran
MBEN asked on 13 Jan 2012, 02:03 AM
Hi,

I want to disable all dates in my datepicker control except the first and the last date of the month.

I tried this code but this does not help:

protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
        {
            DateTime dt = e.Day.Date;
            DateTime dtFirst = new DateTime(dt.Year, dt.Month, 1);
            DateTime dtLast = new DateTime(dt.Year, dt.Month, 1).AddMonths(1).AddDays(-1);

            if (e.Day.Date != dtFirst.Date)
            {
                RadCalendarDay calendarDay = new RadCalendarDay();
                calendarDay.Date = e.Day.Date;
                calendarDay.IsSelectable = false;
                rdpBeginDate.Calendar.SpecialDays.Add(calendarDay);
            }
        } 

aspx:

<telerik:RadDatePicker ID="rdpBeginDate" runat="server">
                        <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"
                            runat="server" OnDayRender="Calendar_OnDayRender">
                           
                        </Calendar>
                        <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                        <DateInput EnableEmbeddedSkins="false" Enabled="false">
                        </DateInput>
                    </telerik:RadDatePicker>

Please help.

4 Answers, 1 is accepted

Sort by
0
MBEN
Top achievements
Rank 2
Veteran
answered on 13 Jan 2012, 07:07 PM
I am able to disable the selection of date but for some reason the dates show in black color whereas the 1st  and last day of the week show in grey color.
Also Can I change the cursor so that the dates do not look like they are selectable.

Another thing is though it disables the selection of the date the user can still input the date. Can the control stop the user from inputting the dates that are not selectable as well?
0
Richard
Top achievements
Rank 1
answered on 16 Jan 2012, 06:43 PM
RadDatePicker-Disabled-Dates.png
MBEN:

I am assuming that you have already referenced and worked with the Disabling calendar days Code Library project, correct?

I have modified this project to disable the first and last day of each month, as per your requirement. The disabled first/last day of each month show in a light gray and the cursor changes from the pointing hand displayed when hovering over valid dates to an arrow tip for the non-selectable days.

Be sure to reference the CSS Skin Selectors and Understanding the HTML Output and CSS Styling for insights on how to customize styling for the weekday vs. weekend and the disabled days.

See the attached screen shots for rendered display.

Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        // necessary to disable the weekends on client-side navigation
        function OnDayRender(calendarInstance, args) {
            // convert the date-triplet to a javascript date
            // we need Date.getDay() method to determine
            // which days should be disabled (e.g. first and last day of month)               
            var jsDate = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]);
            if (jsDate.getDate() == 1 || jsDate.getDate() == getDaysInMonth(jsDate)) {
                var otherMonthCssClass = "rcOutOfRange";
                args.get_cell().className = otherMonthCssClass;
                // replace the default cell content (anchor tag) with a span element
                // that contains the processed calendar day number -- necessary for the calendar skinning mechanism
                args.get_cell().innerHTML = "<span>" + args.get_date()[2] + "</span>";
                // disable selection and hover effect for the cell
                args.get_cell().DayId = "";
            }
 
            function getDaysInMonth(aDate) {
                // returns the last day of a given month
                var m = new Number(aDate.getMonth());
                var y = new Number(aDate.getYear());
 
                var tmpDate = new Date(y, m, 28);
                var checkMonth = tmpDate.getMonth();
                var lastDay = 27;
 
                while (lastDay <= 31) {
                    temp = tmpDate.setDate(lastDay + 1);
                    if (checkMonth != tmpDate.getMonth())
                        break;
                    lastDay++
                }
                return lastDay;
            }
 
        }
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
            <calendar ondayrender="Calendar_OnDayRender">
                    <ClientEvents OnDayRender="OnDayRender" />
                </calendar>
        </telerik:RadDatePicker>
    </div>
    </form>
</body>
</html>
 
Default.aspx.cs:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
 
public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //necessary not to repeat the special days on postback
        if (!Page.IsPostBack)
        {
            RadDatePicker1.Calendar.SpecialDays.Clear();
        }
    }
 
    // necessary to disable the weekend days on first page load
    protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        // modify the cell rendered content for the days we want to be disabled (e.g. first and last day of month)
        DateTime today = DateTime.Today;
        DateTime endOfMonth = new DateTime(today.Year, today.Month, DateTime.DaysInMonth(today.Year, today.Month));
        if (e.Day.Date.Day == 1 || e.Day.Date.Day == endOfMonth.Day)
        {
            // if you are using the skin bundled as a webresource("Default"), the Skin property returns empty string
            string calendarSkin = RadDatePicker1.Calendar.Skin != "" ? RadDatePicker1.Calendar.Skin : "Default";
            string otherMonthCssClass = "rcOutOfRange";
            // clear the default cell content (anchor tag) as we need to disable the hover effect for this cell
            e.Cell.Text = "";
            e.Cell.CssClass = otherMonthCssClass; //set new CssClass for the disabled calendar day cells (e.g. look like other month days here)
 
            // render a span element with the processed calendar day number instead of the removed anchor -- necessary for the calendar skinning mechanism
            Label label = new Label();
            label.Text = e.Day.Date.Day.ToString();
            e.Cell.Controls.Add(label);
 
            // disable the selection for the specific day
            RadCalendarDay calendarDay = new RadCalendarDay();
            calendarDay.Date = e.Day.Date;
            calendarDay.IsSelectable = false;
            calendarDay.ItemStyle.CssClass = otherMonthCssClass;
            RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);
        }
    }
}

I will have a look at disabling ability to input invalid dates by typing into the text box.

Hope this helps!
0
MBEN
Top achievements
Rank 2
Veteran
answered on 23 Jan 2012, 06:41 PM
Hi,

Thanks for the code.Any luck on the ability to validate input of disabled dates by typing in the textbox?
0
Richard
Top achievements
Rank 1
answered on 24 Jan 2012, 03:21 PM
Ben:

I updated the project to allow users to only select the first or last day of a month, either by typing a valid date in the DateInput box or by means of the popup calendar. The popup calendar disables all dates if not the first day or last day of a month. And, the "DateSelected" javascript function clears the DateInput for invalid days.

Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        // necessary to disable the weekends on client-side navigation
        function OnDayRender(calendarInstance, args) {
            // convert the date-triplet to a javascript date
            // we need Date.getDay() method to determine
            // which days should be enabled (e.g. first and last day of month)               
            var jsDate = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]);
            if (jsDate.getDate() == 1 || jsDate.getDate() == getDaysInMonth(jsDate)) {
                // preserve as available date
            }
            else {
                var otherMonthCssClass = "rcOutOfRange";
                args.get_cell().className = otherMonthCssClass;
                // replace the default cell content (anchor tag) with a span element
                // that contains the processed calendar day number -- necessary for the calendar skinning mechanism
                args.get_cell().innerHTML = "<span>" + args.get_date()[2] + "</span>";
                // disable selection and hover effect for the cell
                args.get_cell().DayId = "";
            }
        }
         
        function getDaysInMonth(aDate)
        {
            // returns the last day of a given month
            var m = new Number(aDate.getMonth());
            var y = new Number(aDate.getYear());
 
            var tmpDate = new Date(y, m, 28);
            var checkMonth = tmpDate.getMonth();
            var lastDay = 27;
 
            while (lastDay <= 31)
            {
                temp = tmpDate.setDate(lastDay + 1);
                if (checkMonth != tmpDate.getMonth())
                    break;
                lastDay++
            }
            return lastDay;
        }
 
        function DateSelected(sender, args) {
            var date = args.get_newDate(); //Get the selected date
            if (date != null) {
                if (date.getDate() > 1 && date.getDate() < getDaysInMonth(date)) {
                    sender.clear();
                }
            }
        }
    
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadDatePicker ID="RadDatePicker1" AutoPostBack="true" runat="server" OnSelectedDateChanged="RadDatePicker1_SelectedDateChanged" >
            <DateInput runat="server" AutoPostBack="true" DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" LabelWidth="" >
                <ClientEvents  OnvalueChanged="DateSelected" />
            </DateInput>
            <Calendar runat="server" OnDayRender="Calendar_OnDayRender">
                <ClientEvents OnDayRender="OnDayRender" />
            </Calendar>
        </telerik:RadDatePicker>
        <div>
            <asp:Label ID="Label1" runat="server" ForeColor="Red" />
        </div>
    </div>
    </form>
</body>
</html>

Default.aspx.cs:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
 
public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //necessary not to repeat the special days on postback
        if (!Page.IsPostBack)
        {
            RadDatePicker1.Calendar.SpecialDays.Clear();
        }
    }
 
    // necessary to disable the weekend days on first page load
    protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        // modify the cell rendered content for the days we want to be disabled (e.g. first and last day of month)
        DateTime today = DateTime.Today;
        DateTime endOfMonth = new DateTime(today.Year, today.Month, DateTime.DaysInMonth(today.Year, today.Month));
        if (e.Day.Date.Day == 1 || e.Day.Date.Day == endOfMonth.Day)
        {
            // This is a selectable date
        }else{
            // if you are using the skin bundled as a webresource("Default"), the Skin property returns empty string
            string calendarSkin = RadDatePicker1.Calendar.Skin != "" ? RadDatePicker1.Calendar.Skin : "Default";
            string otherMonthCssClass = "rcOutOfRange";
            // clear the default cell content (anchor tag) as we need to disable the hover effect for this cell
            e.Cell.Text = "";
            e.Cell.CssClass = otherMonthCssClass; //set new CssClass for the disabled calendar day cells (e.g. look like other month days here)
 
            // render a span element with the processed calendar day number instead of the removed anchor -- necessary for the calendar skinning mechanism
            Label label = new Label();
            label.Text = e.Day.Date.Day.ToString();
            e.Cell.Controls.Add(label);
 
            // disable the selection for the specific day
            RadCalendarDay calendarDay = new RadCalendarDay();
            calendarDay.Date = e.Day.Date;
            calendarDay.IsSelectable = false;
            calendarDay.ItemStyle.CssClass = otherMonthCssClass;
            RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);
        }
         
    }
 
    protected void RadDatePicker1_SelectedDateChanged (object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
    {
        Label1.Text = "";
        if (e.NewDate != null)
        {
            Label1.Text = "Your selected date is: " + e.NewDate.Value.ToLongDateString();
        }
    }
}

Hope this helps!


Tags
Calendar
Asked by
MBEN
Top achievements
Rank 2
Veteran
Answers by
MBEN
Top achievements
Rank 2
Veteran
Richard
Top achievements
Rank 1
Share this question
or