Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Agilan
760
Unable to clear and problem in setting Month End date infragistics webdatepicker
posted

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

  • 24497
    Verified Answer
    posted

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