This is a migrated thread and some comments may be shown as answers.

disable dates

4 Answers 385 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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!

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</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!