disable dates

5 posts, 0 answers
  1. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 12 Jan 2012 Link to this post

    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.
  2. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 13 Jan 2012 Link to this post

    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?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 16 Jan 2012 Link to this post

    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!
  5. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 23 Jan 2012 Link to this post

    Hi,

    Thanks for the code.Any luck on the ability to validate input of disabled dates by typing in the textbox?
  6. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 24 Jan 2012 Link to this post

    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!


Back to Top
UI for ASP.NET Ajax is Ready for VS 2017