In this section, We will get the
number of days using two dates using JQuery. Here we are using input type date for
selecting Date. In HTML page we are using three input parameters such as first
Date parameter is StartDate, second one
for EndDate and last one for showing number of days. Here's an example:
<div class="col-md-4">
<span>
<strong>Start
Date*</strong><br />
<input
type="date" id="StartDate " name=" StartDate "
value="" size="40" class="form-control"
aria-required="true" aria-invalid="false" />
</span>
</div>
<div
class="col-md-4">
<span>
<strong>End Date*</strong><br
/>
<input
type="date" id="EndDate " name="EndDate"
value="" size="40" class="form-control"
aria-required="true" aria-invalid="false" />
</span>
</div>
<div class="col-md-4">
<span>
<strong>No Of
Days</strong><br />
<input
type="text" id="noofdays" name="noofdays"
value="" size="40" class="wpcf7-form-control
wpcf7-text wpcf7-validates-as-required" aria-required="true"
aria-invalid="false" placeholder="Enter No Of Days"
disabled="disabled" />
</span>
</div>
Add jquery package in your solution
and give that script reference in your HTML page. Like below script reference
<script
src="~/Scripts/jquery-3.0.0.min.js"></script>
Otherwise you can add direct link of
jquery script reference file. Like below script reference
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Now write script for getting number
of days using start date and end date.
<script
src="~/Scripts/jquery-3.0.0.min.js"></script>
<script>
$(document).ready(function () {
$('# StartDate).change(function () {
if ($('#StartDate').val() != ''
&& $('#EndDate').val() != '') {
var startDay = new Date($('#StartDate').val());
var endDay = new Date($('#EndDate').val());
if (startDay > endDay) {
alert('Start Date is
Greater than End Date');
return false;
}
var millisecondsPerDay = 1000 *
60 * 60 * 24;
var millisBetween =
endDay.getTime() - startDay.getTime();
var days = millisBetween /
millisecondsPerDay;
$('#noofdays').val(Math.floor(days));
}
})
$('#EndDate').change(function () {
if ($('#StartDate').val() != ''
&& $('#accomodationto').val() != '') {
var startDay = new Date($('#StartDate').val());
var endDay = new
Date($('#accomodationto').val());
if (startDay > endDay) {
alert('Start Date is Greater
than End Date');
return false;
}
var millisecondsPerDay = 1000 *
60 * 60 * 24;
var millisBetween =
endDay.getTime() - startDay.getTime();
var days = millisBetween /
millisecondsPerDay;
$('#noofdays').val(Math.floor(days));
}
})
})
</script>
Like this we will get our required
result. and also follow this above procedure in your HTML page and you will
also get your required result.
0 Comments