Question

我有：日期0 =开始日期日期1 =结果日期（添加天数后）NDays =要添加的天数

我需要（js）才能完成：Date0 + NDays = Date1请帮助我，我有0.1代码知识！

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div id="reserve_form">

    <div id="pickup_date"><p><label class="form">Date 0 :</label><input type="text date" value="10/15/1555" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>

    <div id="dropoff_date"><p><label class="form">Date 1 :</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></p></div>

    <div id="numdays"><label class="form"> NDays :</label><input type="text" class="textbox" id="numdays2" name="numdays"/></div>

    </div>
</body>
</html>

Answer 1

查看process substitution。通过在",标记之前添加以下脚本标记来包括时刻库。

</body>

Answer 2

Benjamin建议使用Moment，它是一个绝对出色的库，可以处理日期和时间。但是，Moment不包括DOM操作。您需要查询DOM，侦听事件并更新DOM以响应事件。

如果要解构手头的任务，我们需要

在最简单的情况下，呈现三个字段，三个输入，
在表示开始日期和要添加的额外数据的输入中，我们需要建立event listeners来侦听“更改”事件，并选择这两个字段的值来计算结束日期， li>
对于应该显示结束日期的第三个输入，我们需要随着前两个输入的更改而更改其值，并且实际上可以计算出结束日期。

我们可以认为HTML部分只是三个输入：

<input id="start" type="date">
<input id="inc" type="number">
<input id="result" type="date">

最简单的解决方案如下：

window.addEventListener('DOMContentLoaded', () => {
  const start = document.getElementById('start');
  const inc = document.getElementById('inc');
  const result = document.getElementById('result');

  const updateEndDate = () => {
    const startDate = new Date(start.value);
    const addDays = Number(inc.value);

    if (!isNaN(startDate) && !isNaN(addDays)) {
      const days = startDate.getDate(); // <- returns the day component of the date (as opposed to weekday)
      const endDate = new Date(startDate);

      endDate.setDate(days + addDays);
      result.value = endDate;
    }
  };

  start.addEventListener('change', updateEndDate);
  inc.addEventListener('change', updateEndDate);
});

您可以look at how this code works on Codepen，欢迎您随意分叉，更改，使用它。让我们看一下代码。

首先，每个DOM元素都可以触发 DOM事件。我们可以编写代码来侦听这些事件并运行事件侦听器（我们定义和控制的函数）。因此，我们添加了两个事件侦听器：一个到start输入字段，以日期格式保存开始日期（因为此字段的类型为“日期”），另一个到inc输入字段，表示额外的日期天要添加。

然后，我们声明一个函数，该函数将在start或inc输入字段上每次触发“ change”事件时执行。我们将此函数称为updateEndDate，因为这就是它的目的。您当然可以用不同的方式称呼它。

最后，在updateEndDate函数中，我们执行三件事：获取start和inc字段的值并将它们分别转换为日期和数字；我们检查这些是否实际上是有效值；然后我们计算新的（结束）日期。

可能最令人困惑的是这个：

const days = startDate.getDate();
const endDate = new Date(startDate);

endDate.setDate(days + addDays);

因此Date#getDate方法返回日期的“天”部分。如果日期为“ 2000年10月10日”，则此方法将返回10。如果日期为“ 1990年1月17日”，则返回值为17。

然后，我们创建一个日期对象endDate的新实例，它与startDate相同。在这种情况下，这不一定重要，但是通常建议以这种方式使用日期，因为Javascript中的日期是 mutable 。调用方法，尤其是那些称为“ set-something”的方法，会更改实例的值，并且有时您可能不希望这样做。

是的，endDate。我们要做的最后一件事是在其上调用Date#setDate。假设开始日期是2019年1月17日，而您想增加50天。如果我们将50加到17，结束日期将是2019年1月67日，对吗？嗯，这就是Javascript为我们做的一件事：一旦更新了日期（调用了“设置项”），它就会以一种有意义的方式重新计算。所以应该是3月8日。

我真的希望这个答案可以帮助您了解其中的内容，并祝您学习Java脚本好运。因此，是的，请查看codepen，并祝您好运！

Answer 3

演示中对JavaScript的详细信息进行了评论

    InkWell(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      onTap: () {
        setState(() {
          _isRecording = !_isRecording;
        });
      },
      child: DecoratedBox(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(width: 5.0, color: Colors.white),
        ),
        child: Padding(
          padding: EdgeInsets.all(32.0),
          child: Container(
            width: 40.0,
            height: 40.0,
            child: Container(
              decoration: new BoxDecoration(
                color: Colors.red,
                shape:
                    _isRecording ? BoxShape.rectangle : BoxShape.circle,
                borderRadius: _isRecording
                    ? BorderRadius.all(Radius.circular(8.0))
                    : null,
              ),
            ),
          ),
        ),
      ),
    )

/* 
Reference the form bind the change event to it. It will call
function calc() when change event triggers...
*/
document.forms[0].onchange = calc;

function calc(e) {
  // Collect all references to this form
  var ui = this.elements;
  
  // Get the values from both inputs as numbers
  var begin = ui.init.valueAsNumber;
  var cease = ui.term.valueAsNumber;

  // Convert them into milliseconds then subtract begin from cease
  var diff = (new Date(cease)) - (new Date(begin));
  
  /*
  The value of the output is...
  if diff is NaN then output is 0...
  else if diff is less than 0 then output is 0...
  else divide diff by 8.64x10⁷ (total ms in a day)
  */
  ui.days.value = isNaN(diff) ? 0 : diff < 0 ? 0 : diff / (1000 * 60 * 60 * 24);

}

制作日期计算器以增加日期

3 个答案: