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