Two RadDatePickers

7 posts, 1 answers
  1. Raj Maverick
    Raj Maverick avatar
    12 posts
    Member since:
    Jul 2009

    Posted 03 Feb 2011 Link to this post

    Hi Telerik,

        I am having 2 raddatepickers. When I am done with setting the date of the first date picker, the second datepicker must display a date 14 days lesser than the selected date of raddatepicker1. Also, I must be able to edit the RaddatePicker2

        I would like to do this in javascript.

        Thanks for your help.

    Regards,
    Raj
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Feb 2011 Link to this post

    Hello Raj,

    RadDatePicker exposes a rich client-side API that allows you to control its behavior from client side. You can achieve your scenario by using the methods GetDate()/SetDate(newValue). Here is the sample code.

    aspx:
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
         <ClientEvents OnDateSelected="OnDateSelected" />
    </telerik:RadDatePicker>
    <telerik:RadDatePicker ID="RadDatePicker2" runat="server">
    </telerik:RadDatePicker>

    JavaScript:
    <script type="text/javascript">
        function OnDateSelected(sender, args)
        {
            var datePicker = sender;
            var date = datePicker.get_selectedDate();
            date.setDate(date.getDate() - 14);
            var datePicker2 = $find('<%=RadDatePicker2.ClientID%>');
            datePicker2.set_selectedDate(date);
        }
    </script>

    Also checks the following documentation for more on RadDatePicker Client Object.
    RadDatePicker Client Object

    Thanks,
    Shinu.
  3. Raj Maverick
    Raj Maverick avatar
    12 posts
    Member since:
    Jul 2009

    Posted 04 Feb 2011 Link to this post

    Love you Shinu. Thanks a lot.
  4. illumination
    illumination avatar
    85 posts
    Member since:
    May 2008

    Posted 11 May 2011 Link to this post

    Hi Shinu,

    How about if the scenario is the same but must not include or skip the weekends and holidays (US)?

    Thanks!

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 May 2011 Link to this post

    Hello,

    The following code library demonstrates how you can disable calendar days (e.g. weekend days) in the calendar component of RadDatePicker.
    Disabling calendar days

    Hope this helps,

    Regards,
    Princy.
  6. illumination
    illumination avatar
    85 posts
    Member since:
    May 2008

    Posted 12 May 2011 Link to this post

    Hi Princy.
    I have used the method that was posted on the link you gave me but I'm looking for sample or method that will get the holidays from a table in sql server or xml file. 
    Also I would like a sample method that when I choose the datepicker1, then it will add 5 more days on the datepicker2 without including (or skip the weekends and holidays).
    Thank you.
  7. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 18 May 2011 Link to this post

    Hi Lina,

    Providing example for selection data from sql database or xml file is out of our scope. However if you use the sql database you could use a standard SELECT query with WHERE clause for selecting all holidays. If you use the xml files you could parse the xml and get all holidays.
    Then you could render the holidays into a client side array:
    http://social.msdn.microsoft.com/Forums/en-US/csharpgeneral/thread/6a6a8534-a916-4501-9787-91c5b48b71c7/

    Then you could use the following code snippet:
    <telerik:RadCodeBlock runat="server">
            <script type="text/javascript">
                function OnDateSelected(sender, eventArgs) {
     
                    var datePicker = sender;
                    var date = datePicker.get_selectedDate();
                    var flag = false;
                    var newDate = date.getDate() + 5;
                    date.setDate(newDate);
                     
                    while (!flag) {
                        var jsDate = new Date(date.getFullYear(), date.getMonth() , date.getDate());
                        if (jsDate.getDay() == 0) {
                            date.setDate(date.getDate() + 1);
                        }
                        else if (jsDate.getDay() == 6) {
                            date.setDate(date.getDate() + 2);
                        }
                        else if (DateIsholiday(jsDate)) {
                            date.setDate(date.getDate() + 1);
                        }
                        else {
                            flag = true;
                        }
                    }
                    
                    var datePicker2 = $find('<%=RadDatePicker2.ClientID%>');
                    datePicker2.set_selectedDate(date);
                }
            </script>
        </telerik:RadCodeBlock>
    Where the DateIsholiday(jsDate) searches if the jsDate belongs to the holidays dates.

    Please give it try and let me know if you experience any problems.

    All the best,
    Radoslav
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top