I'm disabling all the other month end dates and enabling only the month end date. In the WebmonthCalendar. The selection box in webmonthcalendar control is initially set to 1/31/2012. When i change the next month it is getting set as 2/29/2012. After setting 2/29/2012, the selection box is not setting to month end date. Instead it is selected on 3/29/2012. How to refresh the calendar and set the selection box appropriate to month end date.
function DayRenderDtpicker(sender, eventArgs) {
var d = new Date(); d.setFullYear(eventArgs.get_day().year, eventArgs.get_day().month, 0);
for (var i = 0; i < sender._days.length; i++) { var calSelDate = sender._days[i].month + '/' + sender._days[i].day + '/' + sender._days[i].year; if (calSelDate == d.format('M/dd/yyyy')) { sender._days[i].disabled = false; sender._days[i].innerHTML = "<div>" + sender._days[i].innerText + "</div>";
} else { sender._days[i].disabled = true; sender._days[i].innerHTML = "<div>" + sender._days[i].innerText + "</div>"; }
}
Setting the last month end date in .aspx.cs page
dtPicker.Value =
DateTime.Today.AddDays(0 - DateTime.Today.Day);
The problem with selection box is calendar control. it is not setting to month end date on DayRenderEvent
Hi,
How i disable all date on webdatepicker except some specific range of date?
Exp: only enable 7 days or 6 days before recent date either all date are disable. that means anyone can select date between before 7 days to now.
Thanks ..
Thanks victor.
It is working great.
Hi ga48,
If I understood your intention, then you want to disable all dates in calendar besides last days in each month. If that is correct, then I wrote for you a sample which does that. You may copy/paste those codes to any temprorary page and test how they work.
Note: you should not modify members in _days[] or in eventArgs.get_days(), otherwise, it will destroy rendering.The RenderDay event is designed to customize rendering and application should use only publicset_xxx(value)member methods, but not modify members directly. Members are assumed to be read only.
Also, if you want automatically select last day in month of calendar from codes, then it will be not possible to pass that selected date to datePicker. Because event-notification model will not know about custom change and when end user clicked already selected date in calendar, then it will be considered as no-change action. It means that application should process extra event CalendarClosed and pass selected date from calendar to datePicker. Also setting disabled almost all days within RenderDay dynamically comes too late for calendar to adjust its actual selection. That may trigger wrong or invalid selection.Sample below should address all those issues.
<script type="text/javascript">function WebMonthCalendar1_RenderDay(sender, eventArgs){ var day = eventArgs.get_day(), disabled = false, month = day.month - 1; if (day.other || day.day < 28) disabled = true; else if (new Date(day.year, month, day.day + 1).getMonth() == new Date(day.year, month, day.day).getMonth()) disabled = true; day.set_disabled(disabled);// if (disabled && day.css.indexOf('HoverDay') > 0)// day.set_css(day.css.replace('HoverDay', ''));// if (!disabled)// day.set_text("<span style='font-weight:bold'>[" + day.day + "]</span>");}function WebMonthCalendar1_VisibleMonthChanged(sender, eventArgs){ var date = eventArgs.get_date(); sender.set_selectedDate(new Date(date.getFullYear(), date.getMonth() + 1, 0));}function WebDatePicker1_CalendarClosed(sender, eventArgs){ if (eventArgs.get_browserEvent().type == 'mousedown') { var cal = $find('<%=WebMonthCalendar1.ClientID%>'); if (cal) sender.set_value(cal.get_selectedDate()); }}</script><ig:WebDatePicker ID="WebDatePicker1" DropDownCalendarID="WebMonthCalendar1" runat="server"> <ClientSideEvents CalendarClosed="WebDatePicker1_CalendarClosed" /></ig:WebDatePicker><ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server"> <ClientEvents RenderDay="WebMonthCalendar1_RenderDay" VisibleMonthChanged="WebMonthCalendar1_VisibleMonthChanged" /></ig:WebMonthCalendar>