Tracking the Date time changes in DatePicker control using Javascript/JQuery

Question

I have two date picker controls(Start Date nd End Date) in my SharePoint Calendar list. And I need to calculate the Hour difference on the fly and show it in a text box.
Can anybody help me to achieve this task using client side scripting?
Thank You in Advance.
Juli

Answer 1

Hi sravankumar1107,
According to your description, my understanding is that you want to figure the difference between start date and end date and then you want to place the value in a text box.
Here is a code snippet for your referecnce:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function initControl()
var txtstartDate = $("#" + $("label:contains('Start Time Date')").attr("for")).val();
var txtstartHour = $("#" + $("label:contains('Start Time Hours')").attr("for")).val();
var txtstartMinute = $("#" + $("label:contains('Start Time Minutes')").attr("for")).val();
var txtendDate = $("#" + $("label:contains('End Time Date')").attr("for")).val();
var txtendHour = $("#" + $("label:contains('End Time Hours')").attr("for")).val();
var txtendMinutes = $("#" + $("label:contains('End Time Minutes')").attr("for")).val();
var starttime = new Date(txtstartDate +" "txtstartHour +":"txtstartMinute);
var endtime = new Date(txtendDate +" "txtendHour +":"txtendMinutes);
var diff = endtime - starttime;
var diffSeconds = diff/1000;
var HH = Math.floor(diffSeconds/3600);
txtHour.val(HH);
</script>
More information for your reference:
http://stackoverflow.com/questions/21844281/i-am-using-datetime-picker-and-want-that-my-start-and-end-date-must-have-differe
http://blog.pentalogic.net/2009/09/setting-default-duration-for-new-calender-events/
Best Regards
Zhengyu Guo
TechNet Community Support