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

How to capture date from date field in HTML using Javascript

本文关键字：日期 字段 何使用 Javascript HTML      更新时间：2024-05-10

请求帮助。我正在尝试从输入字段中捕获日期。用户将单击日历以选择日期，输入字段将显示日期。我需要通过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的新手。提前感谢您的帮助。

Irene

试试这个，

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值作为参数传递。

相关文章：