RadDateTimePicker value for JavaScript calculation

[Charles Wickens]

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 />

[Georgi Krustev]

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.

[Charles Wickens]

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

[Serrin]

Hey Charles,

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