我想从我自己的两个自定义DateTimePickers获得总天数。
我尝试过这个功能:
function dateDifference() {
if($("#fradato").val()!='' && $("#fradato").val()!='') {
var diff = ($("#fradato").datepicker("getDate") - $("#tildato").datepicker("getDate")) / 1000 / 60 / 60 / 24;
$("#antalldager").val(diff)
我遇到的问题是,无论我在哪里尝试调用此函数,DateTimePicker都会停止工作。那么我应该在何处/如何调用此函数或者有更好的方法来实现它?
我想在此文本框中显示toal days:
<div class="form-group">
<label class="control-label col-sm-1 col-sm-offset-3" for="antalldager">Antall dager:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="antalldager" disabled>
这是我的HTML:
<script>valgavdato() </script>
<div id="visdager" style="display: none;">
<label class="control-label col-sm-2 col-sm-offset-3" for="fradato">Book fra:</label>
<div class="container">
<div class="row">
<div class='col-sm-2'>
<div class="form-group">
<div class='input-group date'>
<input type="text" id="fradato" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" ></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="vistildato" style="display: none;">
<label class="control-label col-sm-2 col-sm-offset-3" for="tildato">Book til:</label>
<div class="container">
<div class="row">
<div class='col-sm-2'>
<div class="form-group">
<div class='input-group date'>
<input type="text" id="tildato" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
JS:
$( function valgavdato() {
var dateFormat = "mm/dd/yy",
to_MaxDate = 13; // From date + this = to maxDate
from = $( "#fradato" )
.datepicker({
minDate: '0+',
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
.on( "change", function() {
var PickedDate = getDate( this );
// See that date is in UTC format.
console.log( "From DatePicker: "+JSON.stringify(PickedDate) );
// Process the picked date.
var tempDay = PickedDate.getDate() + to_MaxDate; // Add a number of days to the picked date.
var tempMonth = PickedDate.getMonth() + 1; // Because months are zero based.
var tempYear = PickedDate.getYear() + 1900; // Because years are 1900 based
console.log( "Temp date: "+ tempYear+"/"+tempMonth+"/"+tempDay +" --- It may look impossible... But Date() handles it.");
// Create a date object in a UTC format.
var newMaxDate = new Date(Date.UTC(tempYear, tempMonth-1, tempDay, 0, 0, 0));
console.log( "New max date: : "+ JSON.stringify(newMaxDate) );
// Set the minDate ans maxDate options.
to.datepicker( "option", {"minDate": PickedDate, "maxDate": newMaxDate});
}),
to = $( "#tildato" ).datepicker({
maxDate: '14+',
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
function dateDifference() {
if($("#fradato").val()!='' && $("#fradato").val()!='') {
var diff = ($("#fradato").datepicker("getDate") - $("#tildato").datepicker("getDate")) / 1000 / 60 / 60 / 24;
$("#antalldager").val(diff)
}
}
答案 0 :(得分:1)
我认为@JanisP建议很好。您还可以创建一个轻量级函数,如:
function dateDifference(start, end) {
// Assume Start and End string format: dd/mm/yyyy
var d1 = new Date(start);
var d2 = new Date(end);
// d2 - d1 gives result in milliseconds
// calculate number of days by Math.abs((d2-d1)/86400000, as 24*3600*1000 = 86400000
return Math.abs((d2-d1)/86400000)
}
在此处找到:jQuery UI Datepicker - Number of Days Between Dates
<强>更新强>
从jQuery UI Datepicker Select a Date Range示例中,我创建了这个工作示例:https://jsfiddle.net/Twisty/r8wx6afk/
仅当两个字段在change
事件期间都有日期时才会计算天数。