文章/答案/技术大牛

发布

社区首页 >问答首页 >创建一个日期计算器来添加日期

问创建一个日期计算器来添加日期
EN

Stack Overflow用户

提问于 2019-01-17 20:49:37

回答 3查看 1.2K关注 0票数 1

我有:日期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>

javascript

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-01-17 22:09:27

本杰明推荐的时刻，这是一个绝对棒的图书馆操纵日期和时间。然而，DOM操作没有包含在这个时刻。您需要查询DOM、侦听事件并更新DOM以响应它们。

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

呈现三个字段，在最简单的情况下，三个输入，
在表示开始日期的输入和要添加的额外数据中，我们需要建立事件侦听器来侦听“更改”事件并获取这两个字段的值来计算结束日期，
对于应该显示结束日期的第三个输入，我们需要经常更改它的值，因为前两个输入被更改了，并且可以实际计算结束日期。

我们可以将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);
});

您可以看看这些代码是如何在Codepen上工作的。，您绝对欢迎您叉它，改变它，玩它尽可能多你喜欢。让我们先看一遍代码。

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

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

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

最让人困惑的是这一篇：

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

endDate.setDate(days + addDays);

因此，Date#getDate方法返回日期的"day“组件。如果日期为“2000年10月10日”，则此方法将返回10，如果是“1990年1月17日”，则返回值为17。

然后，我们创建一个新的Date对象实例endDate，它与startDate完全相同。在这种情况下，这并不一定重要，但通常建议以这种方式处理date，因为Javascript中的日期是可变的。调用方法，特别是那些称为“set- the”的方法，会改变实例的值，而且通常您可能不希望这样做。

所以，是的，endDate。我们做的最后一件事就是在上面叫Date#setDate。假设开始日期是2019年1月17日，您想要增加50天。如果我们只加50到17，结束日期是2019年1月67，对吗？这是Javascript为我们做的一件事:一旦一个日期被更新(在它上面调用了一个“set-东西”)，就会以一种有意义的方式重新计算它。所以现在是3月8日。

我真的希望这个答案能帮你弄清楚里面是怎么回事，我祝你学习Javascript好运。所以，是的，看看码页，祝你好运！

票数 1

Stack Overflow用户

发布于 2019-01-17 22:22:20

演示中对JavaScript细节进行了注释。

/* 
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);

}

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <form id="form" onsubmit='return false'>

    <label>Date 0: </label><input id="init" name="init" type="date"><br><br>
    <label>Date 1: </label><input id="term" name="term" type="date"><br><br>

    <label>Days: </label><output id="days" name="days">0</output>

  </form>
</body>

</html>

票数 1

Stack Overflow用户

发布于 2019-01-17 21:24:16

调查https://momentjs.com。通过在</body>标记之前添加以下脚本标记来包含矩库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54244067

复制

相似问题

问创建一个日期计算器来添加日期
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个日期计算器来添加日期EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个日期计算器来添加日期
EN