顯示與使用Javascript/jQuery的

Question

我使用日期選擇器選擇日期時間差，我想計算choosen &然後提醒日期之間差異的difference.I'm無法看到代碼工作

HTML日期選擇器

<input type="date" size="8" name="advDurFrom" /> 
<input type="date" size="8" name="advDurTo"/> 

的Javascript

$('input[name=advDurFrom]').click(function() { 
    var x=$('input[name=advDurFrom]').val(); 
    var date1 = new Date(x); 
    }); 
     $('input[name=advDurTo]').click(function() { 
     var y=$('input[name=advDurTo]').val(); 
    var date2 = new Date(y); 
    }); 
    $('input[name=advDurTo]').focusout(function() { 
    var diffDays = date2.getTime() - date1.getTime(); 
    alert(diffDays); 
    }); 

Answer 1

HTML：

<input type="date" name="startdate"> 
<input type="date" name="enddate"> 
<button id="calculate">Calculate</button> 
<h2 id="result"></h2> 

腳本：

var startdateInput = document.querySelector('input[name="startdate"]'), 
    enddateInput = document.querySelector('input[name="enddate"]'), 
    calculateButton = document.getElementById('calculate'), 
    resultElement = document.getElementById('result'); 

calculateButton.addEventListener('click', function(e) { 

    if(startdateInput.value && enddateInput.value) { 
     result.textContent = new Date(enddateInput.value) - new Date(startdateInput.value); 
    }  
}); 

或者看到的jsfiddle http://jsfiddle.net/zJTfM/

的結果是開始和結束日期之間的毫秒數。

Answer 2

$('input[name=advDurFrom]').live('change', function(e) { 
    var x=$(this).datepicker("getDate"); 
    date1 = x.getTime(); 
}); 
$('input[name=advDurTo]').live('change', function(e) { 
    var y=$(this).datepicker("getDate"); 
    date2 = y.getTime(); 
}); 
$('input[name=advDurTo]').live('blur', function(e) { 
    if(date2 && date1){ 
     var diffDays = date2 - date1 ; 
     alert(diffDays); 
    } else { 
     alert("date is not selected.") 
    } 
}); 

Answer 3

在我的項目中，我使用這個函數來計算2日期之間的差異日期，我修改了一些給你。 see demo in jsfiddle

HTML：

<input type="text" size="8" name="advDurFrom" /> 
<input type="text" size="8" name="advDurTo"/> 
difference days: <span class="diff"><span> 

JS：

function CalendarDays(startDate, endDate) { 
    if (endDate < startDate) 
     return 0; 

    // Calculate days between dates 
    var millisecondsPerDay = 86400 * 1000; // Day in milliseconds 
    startDate.setHours(0, 0, 0, 1); // Start just after midnight 
    endDate.setHours(23, 59, 59, 999); // End just before midnight 
    var diff = endDate - startDate; // Milliseconds between datetime objects 
    var days = Math.round(diff/millisecondsPerDay); 

    return days; 
} 
function common_getDateFromUI(str) { 
    var arr = str.split("/"); 
    var returnDate = new Date(arr[2], arr[1] - 1, arr[0], 0, 0, 0, 0); 
    return returnDate; 
} 
$().ready(function(){ 
    $('input[name="advDurFrom"],input[name="advDurTo"]').datepicker({ 
     showOn : "both", 
     dateFormat : "dd/mm/yy", 
     changeMonth : true, 
     changeYear : true, 
     buttonImageOnly : true, 
     onSelect : function(dateText, inst) {  
       var day1 = common_getDateFromUI($('input[name="advDurFrom"]').val());  
       var day2 = common_getDateFromUI($('input[name="advDurTo"]').val());  
       $(".diff").html(CalendarDays(day1,day2)); 
     } 
    }); 
}); 

Answer 4

我認爲你需要在全球範圍內聲明變量。試試這個代碼。這對我來說是完美的。

var date1 = ""; 
var date2 = ""; 

$('#advDurFrom').click(function() { 
    var x = $(this).val(); 
    date1 = new Date(x); 
}); 
$('#advDurTo').click(function() { 
    var y = $(this).val(); 
    date2 = new Date(y); 
}); 
$('#advDurTo').focusout(function() { 
    var diffDays = date2.getTime() - date1.getTime(); 
    alert(diffDays); 
}); 

，並更改HTML到

<input type="date" size="8" id="advDurFrom" /> 
<input type="date" size="8" id="advDurTo" /> 

Answer 5

的getTime返回毫秒，你只需要轉換成正確的單元。這裏有一個天差的例子。還可以使用模糊事件不會點擊或你最終將分配值之前，用戶實際輸入它

var isOK = false; 
var isOK2 = false; 
$('input[name=advDurFrom]').blur(function() { 
    var x = $('input[name=advDurFrom]').val(); 
    try { 
     date1 = new Date(x); 
     isOK = !isNaN(date1); 
    } catch (e) { 
     isOK = false; 
    } 
    printDiff(); 
}); 
$('input[name=advDurTo]').blur(function() { 
    var y = $('input[name=advDurTo]').val(); 
    try { 
     date2 = new Date(y); 
     isOK2 = !isNaN(date2); 
    } catch (e) { 
     isOK2 = false; 
    } 
    printDiff(); 
}); 

function printDiff(){ 
    if (isOK && isOK2) { 
     var one_day = 1000 * 60 * 60 * 24; 
     var diff = Math.ceil((date2.getTime() - date1.getTime())/(one_day)); 
     console.log(diff + ' days'); 
    } 
} 

Fiddle here