DateJS:传递给JS的Var无法正确计算

时间:2015-07-28 20:58:04

标签: javascript date datejs

我正在尝试做一些简单的计算,我需要一个约会并在那个日期添加x个月。搜索之后,我决定使用DateJS来计算边缘日期。

我设置了一个表单,允许用户输入日期和月数。在键盘功能上,它计算新日期。问题是它没有正确计算。

我可以将日期从表单传递给JS,并在JS中手动指定月份并正确计算。如果我从表格中传递了日期和月份,则计算结果很多。事实上多年了!

如果我用一个硬编码的数字替换$("#monthincrease")。val(),计算工作正常。但不是在使用表单中的数据时。

    <div class="container">
    <div class="jumbotron">
        <h1>Future Date Calculator</h1>
        <p>To calculate a future date, enter a start date and the amount of months to add.</p>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <form class="form-inline" role="form">
              <div class="form-group">
                <label for="startdate">Start Date:</label>
                <input type="date" class="form-control" id="startdate">
              </div>
              <div class="form-group">
                <label for="monthincrease"> And Months To Add:</label>
                <input type="number" class="form-control" id="monthincrease">
              </div>
            </form>
            <p>Date: <span class="futuredate"></span></p>
            <p>Month: <span class="month"></span></p>
        </div>
    </div>

<script type="text/javascript">

$("#monthincrease").on('keyup',function() {
    var newDate = Date.parse( $("#startdate").val() ).addMonths( $("#monthincrease").val() );
    $(".futuredate").html(newDate);
    $(".month").html( $("#monthincrease").val() );
});
</script>

这是我更新的代码。

<div class="container">
    <div class="jumbotron">
        <h1>Future Date Calculator</h1>
        <p>To calculate a future date, enter a start date and the amount of months to add.</p>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <form class="form-inline" role="form">
              <div class="form-group">
                <label for="startdate">Start Date:</label>
                <input type="date" class="form-control" id="startdate">
              </div>
              <div class="form-group">
                <label for="monthincrease"> And Months To Add:</label>
                <input type="number" class="form-control" id="monthincrease">
              </div>
            </form>
            <p>Date: <span class="futuredate"></span></p>
        </div>
    </div>

<script type="text/javascript">
$( document ).ready(function() { 
    $("#monthincrease").on('keyup',function() {
        var incMonths = $("#monthincrease").val();
        var startDate = $("#startdate").val();
        var newDate = new Date.parseExact( startDate, "yyyy-MM-dd" ).addMonths( incMonths );
        $(".futuredate").html(newDate);
        console.log(incMonths);
        console.log(startDate);
        console.log(newDate);
    });
});
</script>

</div>

2 个答案:

答案 0 :(得分:0)

尝试在document.ready块中输入您的事件代码。另外,为了正确计算,请使用DateJS库的parseExact方法,并指定在文本框中输入日期的格式。 https://code.google.com/p/datejs/wiki/APIDocumentation

更新:

$( document ).ready(function() { 
$("#monthincrease").on('keyup',function() {
        var incMonths = $("#monthincrease").val();
        var startDate = $("#startdate").val();
        var newDate = new Date.parseExact( startDate, "M/d/yyyy" ).addMonths( parseInt(incMonths ));
        $(".futuredate").html(newDate);
        });

});

我更正了日期格式并使用了parseInt for months字段。现在试试吧。

答案 1 :(得分:0)

我将var更改为var incMonths = Number($(&#34;#monthincrease&#34;)。val());它将表单输入转换为数字。立即行动。