This is a migrated thread and some comments may be shown as answers.

RadDateTimePicker value for JavaScript calculation

3 Answers 174 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Charles Wickens
Top achievements
Rank 1
Charles Wickens asked on 06 Jan 2009, 08:46 PM
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 />

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 09 Jan 2009, 05:04 PM
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.
0
Charles Wickens
Top achievements
Rank 1
answered on 09 Jan 2009, 05:15 PM
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
0
Serrin
Top achievements
Rank 1
answered on 09 Jan 2009, 05:40 PM
Hey Charles,

You can usually solve that by wrapping the <script...> </script> tags in a RadCodeBlock, let us know if that works. :)
Tags
Calendar
Asked by
Charles Wickens
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Charles Wickens
Top achievements
Rank 1
Serrin
Top achievements
Rank 1
Share this question
or