Question

我想知道你们是否可以提供帮助。到目前为止，我一直在寻找一个星期的答案，我无法弄明白。我是Javascript的新手（尽管我已经使用PHP和HTML几年了）。基本上我正在尝试使用javascript来计算用户输入的开始日期和持续时间的结束日期，而且我正在努力。我希望用户更新表单选项时更新日期：

我得到的代码如下，但我目前只是得到以下错误：

开始：无效日期到期：无效日期

我已经有一个脚本可以检查日期是真实的日期，所以为了简单起见我已经把它留了出来

<script type="text/javascript">
function setExpDate(){
formDate = document.getElementById('startDate');
number = document.getElementById('days');
// set number of days to add
var interval = number;
var startDate = new Date(Date.parse(formDate));
document.write('start: ' + startDate);
var expDate = startDate;
expDate.setDate(startDate.getDate() + interval);
document.write('<br>expire: ' + expDate);
};
</script>

</head>

<body>

<input type="text" size="10" maxlength="10" id="startDate" name="startDate" onblur="setExpDate()" value="01/01/2015">  

<select name="days" id="days" onblur="setExpDate()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

感谢您的帮助！

Answer 1

您只获取元素，而不是日期值。所以只需读取输入值。应该没事。

formDate = document.getElementById('startDate').value;
number = document.getElementById('days').value;

工作版：http://jsfiddle.net/9f5q5/

Answer 2

通过unobtrusive javascript使用addEventListener并拆分Date构造函数的日期字符串以避免字符串解析问题的简单示例。

HTML

<input type="text" id="myStartDate" value="01/01/2015">
<select id="myDays">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<div id="myResult"></div>

的Javascript

var inputElement = document.getElementById('myStartDate'),
    selectElement = document.getElementById('myDays'),
    resultElement = document.getElementById('myResult');

function updateResultElement() {
    var parts = inputElement.value.split('/'),
        dateObject;

    parts[1] -= 1;
    parts.reverse();
    dateObject = new Date(Date.UTC.apply(undefined, parts));
    dateObject.setUTCDate(dateObject.getUTCDate() + Number(selectElement.value));
    resultElement.textContent = dateObject.toUTCString();
}

inputElement.addEventListener('change', updateResultElement, false);
selectElement.addEventListener('change', updateResultElement, false);
updateResultElement();

在jsFiddle

上

表单到Javascript而不点击提交

2 个答案: