javascript - 用 javascript/jquery 显示时差

Question

我正在使用日期选择器来选择日期，我想计算所选日期之间的差异然后提醒差异。我看不到代码工作

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

在我的项目中，我使用这个函数来计算两个日期之间的差异天数，我为你修改了一些。在 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');
    }
}

在这里提琴