用户输入开始/结束日期时，JavaScript显示到期日期 [英] JavaScript display expiry date upon user input of start/end date

问题描述

以前从未用JavaScript编程过，因此，当用户从日历中选择开始日期和结束日期时，请您提供帮助以显示到期日期。从日历中选择结束日期后，到期日期应显示为结束日期增加了两个月。例如：
用户选择2012年10月9日作为开始日期。结束日期为2012年10月16日；到期日期为2012年12月16日。如何在JavaScript中实现？

never programmed in JavaScript before, so I ask your assistance to display the expiry date when user chooses start and end date from the calendar. After selecting the end date from the calendar, the expiry date should display added two months to the end date. For example: The user chooses Oct. 9, 2012 as Start Date; Oct. 16, 2012 as the end date; Dec. 16, 2012 should be the expiry date. How can I achieve this in JavaScript?

请检查此代码，因为我不知道如何编辑该代码。

Please check this code, cause I don't know how to edit this one.

/**
 * Click "Cal" on expiry date
 */
function getExpiryDate() {
if(!document.getElementById('enddate').value.length) {
    alert("End date must be set first.");
}
else {
    prevExpiryDate = document.getElementById('expirydate').value;
    displayCalendar(document.forms[0].expirydate,'yyyy/mm/dd',
        document.getElementById('expirydatebutton'));
}
}

推荐答案

JavaScript包含一个本地 Date 对象，您可以按如下所示向其添加月份...

JavaScript contains a native Date object, you can add months to it as follows...

var endDate = document.getElementById('enddate').value;
var date = new Date(endDate);
date.setMonth(date.getMonth() + 2); // Yes it will calculate going over a year etc
prevExpiryDate = date.getFullYear() + "/" + 
                 (date.getMonth() + 1) + "/" + // Months are 0 for January etc.
                 date.getDate();

注意

• 将值输入到 Date 对象的格式很重要，您需要首先进行验证。


• 当我们创建有效日期时，该值将不会以零开头2012/12/09，而是2012/12/9

• The format you are inputting the value to the Date object is important you will want to validate this first.
• When we are creating the expiry date the value will not be prepended with zeros 2012/12/09, it will be 2012/12/9

或者您可以按照建议的方式使用库

Or you can use a library as suggested

编辑更新的代码，以便更轻松地添加到OP的代码中

EDIT updated code to make it easier to add into OP's code

替代方法，使用事件处理程序，我可以在您的代码中看到您使用的是jQuery，如果要充分利用它的话。 ..

Alternative approaches, use an event handler, I can see in your code you are using jQuery, if you are including it make the most of it...

$("#enddate").change(function() {
  var endDate = $(this).val();

  // Calculate expiry date
  var date = new Date(endDate);
  date.setMonth(date.getMonth() + 2);

  // Get date parts
  var yyyy = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();

  $("#expirydate").val(yyyy + "/" + m + "/" + d);
});

此操作需要在文档准备好后的某个时间在您的代码行441中运行，并且它将设置enddate字段，用于在每次更改时更新到期日期字段。如果您以编程方式进行更改，则可能需要手动调用更改处理程序

This needs to be run sometime after document ready, in your code line 441, and it will set the enddate field to update the expiry date field every time it is changed. If you are changing it programmatically you may need to call the change handler manually

// Insert value programmatically
$("#enddate").val(newValue).change();

否则，您需要一种将初始值传递给 displayCalendar 函数，我没有该函数的工作原理的详细信息，所以我不能最好地建议如何实现。

Otherwise you need a way of passing through an initial value to the displayCalendar function, I have no details of how this function works so I cannot best advise how this might be done.

编辑该函数是2006年DHTMLGoodies JS日历的一部分，该函数调用onchange但不能与jQuery很好地配合，因此您需要做的是使用元素的基本onchange属性来替换上面的jQuery代码。 。

EDIT The function is part of DHTMLGoodies JS Calendar from 2006 which is calling onchange but doesn't play nice with jQuery so what you will need to do, is do it using the basic onchange property of the element which replaces the jQuery code above...

document.getElementById("enddate").onchange = function() {
  var endDate = this.value;

  // Calculate expiry date
  var date = new Date(endDate);
  date.setMonth(date.getMonth() + 2);

  // Get date parts
  var yyyy = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();

  document.getElementById("expirydate").value = yyyy + "/" + m + "/" + d;
}

这篇关于用户输入开始/结束日期时，JavaScript显示到期日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！