03. <head>
04.
05. <link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
06. <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
07.
08. <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
09. <script type="text/javascript" src="jquery-ui.min.js"></script>
10.
11. <script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
12. <script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
13.
14.
15.
16. </head>
17. <body>
18.
19.Start Date : <input type="text" name="dateStart" id="dateStart" value="" />
20.End Date : <input type="text" name="dateEnd" id="dateEnd" value="" />
21.Total Day <input type="text" name="totolDay" id="totolDay" value="" />
22.
23.<script type="text/javascript">
24.
25.$(function(){
26.
27. var startDateTextBox = $('#dateStart');
28. var endDateTextBox = $('#dateEnd');
29.
30. startDateTextBox.datepicker({
31. dateFormat: 'dd-M-yy',
32. onClose: function(dateText, inst) {
33. if (endDateTextBox.val() != '') {
34. var testStartDate = startDateTextBox.datetimepicker('getDate');
35. var testEndDate = endDateTextBox.datetimepicker('getDate');
36. if (testStartDate > testEndDate)
37. endDateTextBox.datetimepicker('setDate', testStartDate);
38. }
39. else {
40. endDateTextBox.val(dateText);
41. }
42. displayDateDiff();
43. },
44. onSelect: function (selectedDateTime){
45. endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
46. }
47. });
48. endDateTextBox.datepicker({
49. dateFormat: 'dd-M-yy',
50. onClose: function(dateText, inst) {
51. if (startDateTextBox.val() != '') {
52. var testStartDate = startDateTextBox.datetimepicker('getDate');
53. var testEndDate = endDateTextBox.datetimepicker('getDate');
54. if (testStartDate > testEndDate)
55. startDateTextBox.datetimepicker('setDate', testEndDate);
56. }
57. else {
58. startDateTextBox.val(dateText);
59. }
60. displayDateDiff();
61. },
62. onSelect: function (selectedDateTime){
63. startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
64. }
65. });
66.
67.});
68.
69.function displayDateDiff()
70.{
71. if($('#dateStart').val() != "" && $('#dateEnd').val() != "")
72. {
73. var dateStart = new Date($("#dateStart").val());
74. var dateEnd = new Date($("#dateEnd").val())
75. var timeDiff = Math.abs(dateEnd.getTime() - dateStart.getTime());
76.
77. var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
78. diffDays = diffDays + 1;
79. $("#totolDay").val(diffDays);
80. }
81.}
82.
83.</script>
84.
85. </body>
86.</html>
