如何使用Javascript从HTML中的日期字段捕获日期

Question

请求帮助。 我试图从输入字段捕获日期。 用户将单击日历以选择日期，输入字段将显示日期。 我需要将日期传递给JavaScript函数，以便从所选日期开始计算30天。 使用HTML和JavaScript。

用于选择日期的HTML编码：

 <div id="divAwarenessDate" class="fieldRow">
    <div class="leftLabel labelWidth20">
        <label for="txtAwarenessDate_date" class="reqdLabel">* Awareness
          Date:</label>
    </div>
 <div class="leftField">
    <div class="formField34">
        <input id="txtAwarenessDate_date" type="text" class="readonly 
          textfield textfield35 required" readonly="readonly" alt="Awareness
            Date" title="Awareness Date" />
        <input id="btnAwarenessDateCalendar" type="button"
          class="calendarImage" title="Awareness Date" />
    </div>
 </div>
</div>

HTML代码将请求提交给Javascript函数，采取上述日期并添加30天：

<div class="leftLabel labelWidth22">
     <label for="">A. Has a death occurred?</label>
</div>
<div class="leftField">
<div class="formField34">
<input id="rbDeathOccurred" name="rbDeathOccurred" type="radio"
  class="radiobuttonfield" alt="Death Occurred" title="Death Occurred"
  value="Yes" onclick="javascript:USAYesNoCheckDO();" />Yes
 <input id="rbDeathOccurred" name="rbDeathOccurred" type="radio" 
   class="radiobuttonfield" alt="Death Occurred" title="Death Occurred" 
   value="No" onclick="javascript:USAYesNoCheckDO();" />No
</div>
</div>
<p>&nbsp;</p>
<div id="USADOYesNo" style="display:none">
 <ol type="a" class="indentList">
    <li>Is there a reasonable possibility that a device failure or 
       malfunction was a direct or indirect factor in the death? 
      <br>
      <input id="rbDOYesNo" name="rbDOYesNo" type="radio" 
       class="radiobuttonfield" alt="Yes - Reportable" title="Yes - 
       Reportable" value="Yes" 
       onclick="javascript:USDeviceFailure30Days();"  />
      <label for="rbDOYesNo" class="rptColor">Yes - Reportable - 30 days 
       from today's date</label>  
      <input id="rbDOYesNo1" name="rbDOYesNo" type="radio" 
       class="radiobuttonfield" alt="No" title="No" value="No" 
       onclick="javascript:USDeviceFailure30Days();" />No 
     <div id="calc" class="indentListCalc"> 
       <input id="dt30Days" type="text" 
         class="textfieldCalc labelWidth25" />
     </div>
       <br>
      </li>
     </ol>
   </div>

JavaScript编码 - 调用计算函数的函数：

 function USDeviceFailure30Days() {
  if (document.getElementById('rbDOYesNo').checked) {
     document.getElementById('calc').style.display = 'block';
    date30Days();

} else  {

    document.getElementById('calc').innerHTML = '';
    document.getElementById('calc').style.display = 'none';

  } 
}

计算函数的JavaScript代码：

function date30Days(){ 
var dt = document.getElementById(txtAwarenessDate_date);
dt.setDate( dt.getDate() + 30 );
var mo = dt.getMonth() + 1; // JS months are 0 to 11, so need to add 1
var dy = dt.getDate();
var yr = dt.getYear() % 100; // just to make sure only 2 digit year
var dueDate = (mo < 10 ? "0" : "" ) + mo + "/" + ( dy < 10 ? "0" : "" ) 
 + dy + "/" + (yr < 10 ? "0" : "" ) + yr;
var text = "30 days from today is ";

  document.getElementById('calc').innerHTML = text + dueDate;

 }

我是HTML和JavaScript的新手。 预先感谢您的帮助。

艾琳

Answer 1

尝试这个，

function date30Days(){ 
var dt = new Date(document.getElementById('txtAwarenessDate_date').value);
dt.setDate( dt.getDate() + 30 );
var mo = dt.getMonth() + 1; // JS months are 0 to 11, so need to add 1
var dy = dt.getDate();
var yr = dt.getYear() % 100; // just to make sure only 2 digit year
var dueDate = (mo < 10 ? "0" : "" ) + mo + "/" + ( dy < 10 ? "0" : "" ) 
 + dy + "/" + (yr < 10 ? "0" : "" ) + yr;
var text = "30 days from today is ";

  document.getElementById('calc').innerHTML = text + dueDate;

 }

只需将输入#txtAwarenessDate_date值作为参数传递即可。