【问题标题】:jquery datepicker + date diff calculationjquery datepicker + 日期差异计算
【发布时间】:2011-12-10 08:33:45
【问题描述】:

这是我的代码:

$(function() {
    $( "#arr_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
    $( "#dep_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
});

$(function() {
    var start = $('#arr_date').val();
    var end = $('#dep_date').val();
    var diff = new Date(end - start);
    var days = diff/1000/60/60/24;
    $('#num_nights').val(days);  
});

我在 stackoverflow 上找到了这个日期差异解决方案,但它对我不起作用。

它根本不计算日期差异。我认为这可能是因为日期格式(dd-mm-yy)。我也尝试过使用 yyyy-mm-dd 格式,但它也不起作用。

谁能帮助我并告诉我可能导致问题的原因?谢谢你。

【问题讨论】:

    标签: jquery jquery-ui datepicker


    【解决方案1】:

    你不想在这里使用.val(),这会给你一个字符串,并且从彼此中减去字符串并不是非常有用。 datepicker 有一个方法,getDate,它给你一个 Date 对象,所以你可以使用它:

    var start = $('#arr_date').datepicker('getDate');
    var end   = $('#dep_date').datepicker('getDate');
    var days   = (end - start)/1000/60/60/24;
    

    演示:http://jsfiddle.net/ambiguous/TCXcX/

    另外,这段代码:

    $(function() {
        var start = $('#arr_date').val();
        var end = $('#dep_date').val();
        var diff = new Date(end - start);
        var days = diff/1000/60/60/24;
        $('#num_nights').val(days);  
    });
    

    将在 DOM 准备就绪时运行,但您不希望它在选择日期之前运行。您需要将(更正后的)计算代码绑定到按钮或观看 onSelect 事件:

    function showDays() {
        var start = $('#arr_date').datepicker('getDate');
        var end   = $('#dep_date').datepicker('getDate');
        if(!start || !end)
            return;
        var days = (end - start)/1000/60/60/24;
        $('#num_nights').val(days);  
    }
    
    $( "#arr_date" ).datepicker({ dateFormat: 'dd-mm-yy', onSelect: showDays });
    $( "#dep_date" ).datepicker({ dateFormat: 'dd-mm-yy', onSelect: showDays });
    

    还有另一个演示:http://jsfiddle.net/ambiguous/5BbGS/

    【讨论】:

    • 谢谢。我已经做到了。我的代码如下所示: $(function() { var start = $('#arr_date').datepicker('getDate'); var end = $('#dep_date').datepicker('getDate'); var days = (结束-开始)/1000/60/60/24; $('#num_nights').val(days); });但还是不行。我错过了什么?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-24
    • 2021-12-31
    相关资源
    最近更新 更多