RadDateTimePicker value for JavaScript calculation

4 posts, 0 answers
  1. Charles Wickens
    Charles Wickens avatar
    2 posts
    Member since:
    Sep 2008

    Posted 06 Jan 2009 Link to this post

    I am fairly new to the Client side programming and enjoy the increased performance it provides users.  with that said, I am trying to do a pretty simple math calculation with 2 RadDateTimePickers.  I would like to pass their values to the JS and output the difference.

    Any assistance would be appreciated, I seem to recall seeing an example somewhere in the Demo's however I can't find it again.

    chuck

    <script language="javascript" type="text/javascript">

            function dateDif() {
                date1 = new Date();
                date2 = new Date();
                diff = new Date();

                date1temp = new Date(document.getElementById("<%= RadDateTimePicker1.ClientID %>").value);
                document.getElementById("txtDate1").value = date1temp.getTime();
                date1.setTime(date1temp.getTime());

                date2temp = new Date(document.getElementById("<%= RadDateTimePicker2.ClientID %>").value);
                document.getElementById("txtDate2").value = date2temp.getTime();
                date2.setTime(date2temp.getTime());


                // sets difference date to difference of first date and second date
                //alert("firstDiff")
                diff.setTime(Math.abs(date1.getTime() - date2.getTime()));

                //alert("next is time diff")
                timediff = diff.getTime();

                //alert("next is weeks diff")
                weeks = Math.floor(timediff / (1000 * 60 * 60 * 24 * 7));
                timediff -= weeks * (1000 * 60 * 60 * 24 * 7);
                document.getElementById("txtWeeks").value = weeks;

                //alert("next is days diff")
                days = Math.floor(timediff / (1000 * 60 * 60 * 24));
                timediff -= days * (1000 * 60 * 60 * 24);
                document.getElementById("txtDays").value = days;

                //alert("next is hours diff")
                hours = Math.floor(timediff / (1000 * 60 * 60));
                timediff -= hours * (1000 * 60 * 60);
                document.getElementById("txtHours").value = hours;

                //alert("next is minites diff")
                mins = Math.floor(timediff / (1000 * 60));
                timediff -= mins * (1000 * 60);
                document.getElementById("txtMinutes").value = mins;

                //alert("next is seconds diff")
                secs = Math.floor(timediff / 1000);
                timediff -= secs * 1000;
                document.getElementById("txtSeconds").value = secs;

                document.getElementById("output").value = weeks + " weeks, " + days + " days, " + hours + " hours, " + mins + " minutes, and " + secs + " seconds";

                return false; // form should never submit, returns false - prevents postback of page and just returns value
            }


        </script>
     <telerik:RadDateTimePicker ID="RadDateTimePicker1" SharedCalendarID="SharedCalendar" SharedTimeViewID="SharedTimeView" runat="server">
        </telerik:RadDateTimePicker>
        <br />
    <telerik:RadDateTimePicker ID="RadDateTimePicker2" SharedCalendarID="SharedCalendar" SharedTimeViewID="SharedTimeView" runat="server">
        </telerik:RadDateTimePicker>
        <telerik:RadTimeView ID="SharedTimeView" runat="server" Skin="Inox">
        </telerik:RadTimeView>
        <telerik:RadCalendar ID="SharedCalendar" runat="server" EnableMonthYearFastNavigation="False"
            EnableMultiSelect="False" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
            Skin="Inox">
        </telerik:RadCalendar>
        <br />
    <input id="Button1" type="button" value="Calc" onclick="return dateDif();" /><br />
    Date Difference:<br />
        <input type="text" id="output" name="difference" value="" size="60" />
        <br />
        <br />
        <br />
        Display values:<br />
        date1:
        <input type="text" id="txtDate1" name="difference" value="" size="30" /><br />
        date2:
        <input type="text" id="txtDate2" name="difference" value="" size="30" /><br />
        Number of weeks:
        <input type="text" id="txtWeeks" name="difference" value="" size="30" /><br />
        Number of days:
        <input type="text" id="txtDays" name="difference" value="" size="30" /><br />
        Number of hours:
        <input type="text" id="txtHours" name="difference" value="" size="30" /><br />
        Number of minutes:
        <input type="text" id="txtMinutes" name="difference" value="" size="30" /><br />
        Number of seconds:
        <input type="text" id="txtSeconds" name="difference" value="" size="30" /><br />
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 09 Jan 2009 Link to this post

    Hi Charles,

    To attain the functionality you are after, you have to find those RadDateTimePicker controls and then to get selected dates in order to be able to calculate the difference. First you can use $find("RadDateTimePicker.ClientID") to find the control. Then just call get_selectedDate() method to get selected date.

    Here is a code snippet presenting the described approach:
            <script type="text/javascript"
                function GetDiff() { 
                    var date1 = $find("<%=RadDateTimePicker1.ClientID %>").get_selectedDate(); 
                    var date2 = $find("<%=RadDateTimePicker2.ClientID %>").get_selectedDate(); 
                    //Set 1 day in milliseconds 
                    var one_day = 1000 * 60 * 60 * 24 
     
                    //Calculate difference btw the two dates, and convert to days 
                    alert(Math.ceil((date1.getTime() - date2.getTime()) / (one_day)) + 
    " days difference!"
                } 
            </script> 

    For more information you can refer to the RadDateTimePicker Client Object page.

    Best regards,
    Georgi Krustev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Charles Wickens
    Charles Wickens avatar
    2 posts
    Member since:
    Sep 2008

    Posted 09 Jan 2009 Link to this post

    Georgi,

    When I copy that code into my page, I get the following configuration error:

    The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).


    Any thoughts?  I have been getting this error anytime I try to get the client ID in JS.

    Thanks,
    chuck
  5. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 09 Jan 2009 Link to this post

    Hey Charles,

    You can usually solve that by wrapping the <script...> </script> tags in a RadCodeBlock, let us know if that works. :)
Back to Top