Disable some Date in the Rad date Picker

20 posts, 0 answers
  1. Karthick Purushothaman
    Karthick Purushothaman avatar
    23 posts
    Member since:
    Mar 2009

    Posted 08 Jun 2009 Link to this post

    Hi,
     
    How to disable the some Date in the Rad Date Picker. I can  be able to disable the date in the Calender control. But i cant be able to acvhieve this in the Date picker.

    Can anyone help me  to solve this issue.

    Thanks and Regards,
    Sushanth Mathew

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 09 Jun 2009 Link to this post

    Hello Karthick,

    For more information about how to disable calendar days in the calendar component of RadDatePicker, please refer to the following article:
    Code Library

    Best wishes,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jun 2009 Link to this post

    Hi Karthik,

    Try following approach in order to disable the day in RadDatePicker.

    .aspx
     
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">  
        <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">  
            <SpecialDays> 
                <telerik:RadCalendarDay Date="2009-06-12" IsSelectable="False" IsDisabled="True">  
                </telerik:RadCalendarDay> 
            </SpecialDays> 
            <DisabledDayStyle BackColor="#FFE0C0" /> 
        </Calendar> 
    </telerik:RadDatePicker> 

    You can also try disabling day from code behind as shown below.
    .cs
     
    protected void Button1_Click(object sender, EventArgs e)  
    {  
        RadCalendarDay calendarDay = new RadCalendarDay();  
        DateTime dt = new DateTime(2009, 06, 20); // Date to disable  
        calendarDay.Date = dt.Date;  
        calendarDay.IsDisabled = true;  
        calendarDay.IsSelectable = false;         
        RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);   
    Also checkout the code library:
    Disabling calendar days

    -Princy.
  5. Karthick Purushothaman
    Karthick Purushothaman avatar
    23 posts
    Member since:
    Mar 2009

    Posted 09 Jun 2009 Link to this post

    Hi,

    I can be able to disable some date in the popup calender in the date picker. But when i navigate to next month and come back to the current month i can be able to select those disable dates. At that time disabling is not happen.

    Ex: For the current month i can be able to disable selecting  "Sunday" but when i navigate to next month i can be able to select "Sunday" also. In this case disabling is not happen.

    Susahnth Mathew
  6. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 09 Jun 2009 Link to this post

    Hello Karthick,

    In order to persist the changes I suggest that you disable the days in RadDatePicker using DayRender event.
    Find more information in the following article:
    DayRender Event

    Best wishes,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. JB
    JB avatar
    16 posts
    Member since:
    Jul 2008

    Posted 18 Jun 2009 Link to this post

    Hi,

    I followed the example you have given and the DayRender demo. However the DayRender is meant for Calendar and not for DatePicker. I tried implementing it for the Calendar within the DatePicker but it is not executing that method.

    My aspx page code

    <telerik:RadDatePicker ID="RadDatePicker1" Runat="server"  
            Culture="English (United Kingdom)" ShowPopupOnFocus="True" Skin="Vista"  
            EnableTyping="False" onselecteddatechanged="RadDatePicker1_SelectedDateChanged"
            <DateInput Runat="server" ReadOnly="True"
            </DateInput> 
    <Calendar Runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"  
                ViewSelectorText="x" Skin="Vista"  OnDayRender="CustomizeDay"
        <SpecialDays> 
            <telerik:RadCalendarDay Date="2009-06-24" IsDisabled="True"  
                IsSelectable="False"
            </telerik:RadCalendarDay> 
        </SpecialDays> 
        <DisabledDayStyle Font-Bold="True" Font-Strikeout="True" /> 
            </Calendar> 
     
    <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton> 
        </telerik:RadDatePicker> 

    Page's cs code

    private DateTime startDate = DateTime.Today; 
        private DateTime endDate = DateTime.Today.AddDays(7); 
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
     
        } 
     
        protected void CustomizeDay(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e) 
        { 
            DateTime CurrentDate = e.Day.Date; 
            if (startDate <= CurrentDate && CurrentDate <= endDate) 
            { 
                return
            } 
     
            e.Day.IsDisabled = true
            e.Day.IsSelectable = false
            e.Day.IsSelected = false
        } 
     
        protected override void OnPreRender(EventArgs e) 
        { 
            base.OnPreRender(e); 
        } 
     
        protected void RadDatePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e) 
        { 
     
        } 

    Hope you can tell me where I made the mistake in.
  8. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 19 Jun 2009 Link to this post

    Hello,

    I followed your scenario in order to replicate the problem but to no avail. Please find attached a simple runnable application which is working as expected. GIve it a try and let me know what is the difference in your case.

    Kind regards,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. JB
    JB avatar
    16 posts
    Member since:
    Jul 2008

    Posted 19 Jun 2009 Link to this post

    Hi,

    I used the code you gave me but it did not do what it was supposed to do. The code is being executed now (don't know what is different from my code) but the calendar is not disabling the dates as it should. My purpose is to disable all the dates other than a particular range of dates. I know I can use Min and Max date range but I'm trying to implement a multiple range calendar and this is not possible with min max date range. So this is the alternative solution. However, it doesn't seem to work.

    From the code, you can see that I have set the days to be disabled and not selectable. However, I seem to be able to select them when the calendar loads. Don't know what I'm doing wrong. I used the exact code you gave me.

    Please suggest how I can do this.
    Regards,
    JB
  10. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 24 Jun 2009 Link to this post

    Hello

    Please find attached a modified project that demonstrates the needed approach. Give it a try and let me know if you have other questions or problems.

    I hope this helps.

    Regards,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  11. JB
    JB avatar
    16 posts
    Member since:
    Jul 2008

    Posted 27 Jun 2009 Link to this post

    Hi,

    Your example works for the current month but not for the next months or previous months. All the dates in the initial popup calendar month is blocked as I wanted but any dates that doesn't fall in that calendar month area doesn't get blocked.

    Is there anyway to do it for all the months so if the user navigates to other months/years, the same pattern follows so only dates listed as active will be selectable and not the others?

    Thanks for the support.

    Regards,
    JB
  12. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 29 Jun 2009 Link to this post

    Hello,

    To disable the required dates for the next/previous months, you should add OnDayRender client-side event handler which is called for every calendar day cell when the calendar is rendered as a result of client-side navigation. This event mimics the server-side DayRender event, giving final control over the output of a specific calendar day cell. This event can be used to apply analogous changes to calendar cells when the user navigates that the server-side event handler applied to the cells in the initial view.

    I hope this helps.

    Regards,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  13. JB
    JB avatar
    16 posts
    Member since:
    Jul 2008

    Posted 29 Jun 2009 Link to this post

    Hi,

    Can you suggest how I can disable date ranges that is dynamic and retrieved from the database within the client side javascript?

    My purpose is to disable all the dates other than a particular range of dates. I know I can use Min and Max date range but I'm trying to implement a multiple range calendar and this is not possible with min max date range.

    So in other words, I won't know how many sets of range will be there. I won't know what the values are of the date ranges. And there might be individual dates blocked as well. All the information comes from the database. I can implement this in the server side but how do I bring it to client side? If you can provide an example, I would be grateful.

    Regards,
    JB



  14. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 02 Jul 2009 Link to this post

    Hi,

    I suggest you try  following the solution from the code library (Disabling calendar days), which will help you to address the issue you encountered.

    Let me know if it helps, or you will need additional assistance.
     
    Sincerely yours,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  15. alok singh
    alok singh avatar
    1 posts
    Member since:
    Oct 2009

    Posted 15 Jan 2010 Link to this post

    Hi,
    My name is Alok what i am trying to do is display range of two dates from rad date picker how could it possible
    .is there any other way to achive this....

    thankyou
    Alok
  16. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 19 Jan 2010 Link to this post

    Hello,

    I recommend you try the following code snippet in order to disable a set of Dates in the given date range:
    C#:
        
    protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)  
        {  
               
            DateTime StartDate = Convert.ToDateTime("06/11/2009");  
            DateTime EndDate = Convert.ToDateTime("06/15/2009");  
            if (e.Day.Date >= StartDate.Date && e.Day.Date <= EndDate.Date)  
            {  
        
                // disable the selection for the specific day  
                RadCalendarDay calendarDay = new RadCalendarDay();  
                calendarDay.Date = e.Day.Date;  
                calendarDay.IsSelectable = false;  
                RadCalendar1.SpecialDays.Add(calendarDay);  
            }  
        
        }

    I hope this helps.

    Sincerely yours,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  17. Gijs
    Gijs avatar
    1 posts
    Member since:
    Jul 2012

    Posted 07 Sep 2012 Link to this post

    Hi

    I followed all recommended steps, downloaded all examples but unfortunately when initially the calendar is loaded the current month dates are not disabled (I want to disable everything but Start/End week)
    I want to mention that Ajax/Js disabling dates code works nicely.
    Here is a short movie: http://screencast.com/t/xZzMKK1Kx

    Thanks
  18. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Sep 2012 Link to this post

    Hi Gijs,

    Note that in order to apply changes purely client-side attaching the DayRender client event, you need to navigate to a different month and thus force the calendar to re-render itself. This is the cause DayRender to not fire on load. In order to fire OnDayRender client side event before navigate to a different view you should handle OnLoad client-side event and navigate calendar as demonstrated in this online demo.

    Regards,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  19. Nelson
    Nelson avatar
    12 posts
    Member since:
    Nov 2010

    Posted 25 Nov 2012 Link to this post

    Hello,

    I have been looking on how to implement client-side enabling and disabling of days on the RadDatePicker Calendar control.

    I have reviewed the referenced example in this thread and it has helped out quite a bit. However, I am hitting a road block and am hoping I may receive a little guidance.

    In essence, I want to take the example code one step further and derive whether or not I am going to enable or disable a calendar day based on an ajax request to a webservice that ideally would return a boolean.

    However after implementing this I was reminded of the fact that (of course) the nature of these requests are asynchronous and so the result is received after the OnDayRender client side event is fired. As you can imagine, this is problematic because by then the calendar will have already been rendered and I will be outside of the OnDayRender event context.

    I am sure there must be a way to enable and disable days in client-side based on server-side logic (ajax methods) but I am wondering if I could be pointed to the right direction on how to acheive this. I know how to properly form the Ajax calls and pass a reference to a function to fire off when the call was successful, but I am not sure how I am going to enable and disable days when I am no longer in the OnDayRender event.

    Any information or guidance here would be most welcome. Ultimately, the days that are allowed to be picked will be defined server-side and so they will need to be enabled or disabled dynamically and OnDayRender (client side) seems to be the right fit here but I am open to suggestions there as well.

    Thanks,
    Nelson 

    Thanks,
    Nelson
  20. Nelson
    Nelson avatar
    12 posts
    Member since:
    Nov 2010

    Posted 28 Nov 2012 Link to this post

    Was there any information or suggestions on this? Would it be more helpful if I submitted a support ticket instead?

    Thanks,
    Nelson
  21. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 29 Nov 2012 Link to this post

    Hello Nelson,

    My colleague Angel already answered your question in the support ticket you have opened on the matter. I am pasting his answer here as well:

    The only way you can resolve the problem is by storing the dates that you want to disable client-side. From there on you can intercept the client-side OnDateClick event check if the selected exist in the collection previously created and if so cancel the event like this:
    Copy Code
    args.set_cancel(true);
    You can not use server-side disabling of the dates because you are using services. The upper-mentioned approach however should do the trick.

    To avoid duplicate posts I will ask you to continue your comunication there.

    All the best,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017