理解JavaScript日期操作的基础
在JavaScript中处理日期和时间是常见的任务。Date对象是内置的用于处理日期和时间的核心对象。然而，许多初学者可能会尝试使用像addDays()这样的自定义方法来增加日期，但这并非JavaScript Date对象的标准方法。
addDays的误区与setDate的正确用法
JavaScript的Date对象并没有名为addDays的内置方法。要增加或减少天数，我们应该使用setDate()方法。setDate()方法用于设置一个月的某一天（1到31），它接受一个整数作为参数。一个巧妙的用法是，如果你传入的数字超出了当前月份的天数范围，setDate()会自动调整月份和年份。
例如，要增加21天，你可以这样做：
立即学习“Java免费学习笔记（深入）”；
let myDate = new Date(); // 获取当前日期 myDate.setDate(myDate.getDate() + 21); // 将日期增加21天
这里的myDate.getDate()返回当前日期是当月的第几天。将其加上21后，setDate()会根据新的天数自动计算出正确的月份和年份。
动态设置HTML日期输入框的max属性
HTML5的元素提供了一个max属性，用于指定日期输入框允许选择的最大日期。这个属性的值必须是YYYY-MM-DD格式的字符串。
要实现动态设置，我们需要以下步骤：
- 获取日期输入值： 从源日期输入框（例如，开始日期）获取用户选择的日期字符串。
- 转换为Date对象： 将获取到的日期字符串转换为JavaScript的Date对象，以便进行日期计算。
- 计算新日期： 使用setDate()方法在Date对象上增加指定的天数（例如21天）。
- 格式化日期： 将计算出的新Date对象格式化为YYYY-MM-DD字符串，以符合max属性的要求。
- 应用max属性： 将格式化后的日期字符串赋值给目标日期输入框（例如，结束日期）的max属性。
完整示例代码
以下是一个完整的示例，演示了如何根据一个起始日期，计算出21天后的日期，并将其设置为另一个日期输入框的max属性。为了更好的用户体验和代码可维护性，我们将使用事件监听器而非内联onclick属性。
动态设置日期输入框Max属性
注意事项
- 日期格式化： max属性期望的日期格式是YYYY-MM-DD。直接将Date对象赋值给setAttribute("max", dateObject)是无效的。你需要使用dateObject.toISOString().split('T')[0]或手动拼接来获取正确的格式。
- 变量命名： 避免在同一作用域内重复声明同名变量（例如，原问题中var inputValue被声明了两次）。这可能导致混淆和难以调试的问题。使用const或let关键字，并为变量选择有意义的名称。
- 事件监听： 推荐使用addEventListener()方法来绑定事件，而不是在HTML元素上直接使用onclick等内联事件。addEventListener()提供了更灵活的事件管理，支持添加多个事件处理器，并且与内容和行为分离，使得代码更易于维护。
- 起始日期验证： 在计算结束日期之前，务必检查起始日期是否已选择。如果起始日期为空，则无法进行有效的日期计算。
- min属性的设置： 为了确保用户选择的结束日期不早于起始日期，通常也会为结束日期输入框设置一个min属性，其值就是起始日期。这进一步增强了表单的可用性和数据有效性。
总结
通过本教程，我们学习了如何在JavaScript中正确地增加日期，即使用Date对象的setDate()方法。我们还掌握了如何将计算出的日期格式化为YYYY-MM-DD字符串，并将其动态应用于HTML 元素的max属性，从而有效限制用户可选择的日期范围。遵循变量命名规范和使用现代事件监听器等最佳实践，能够编写出更健壮、可维护的JavaScript代码。
