如何添加日期功能-有解無憂

如果選擇 BioNTech，我想在第一次給藥日期后添加（也顯示）21 天，或者如果選擇 Sinovac，我想在所選天數中添加 28 天。

   Enter your First name:
    <br>
    <input font-size="30px" style="padding:10px; width:500px;font-size:20px"type="text" name="FName" placeholder="Last Name">
    <br>
    <br />
    Enter your Last name:
    <br />
    <input font-size="30px" style="padding:10px; width:500px;font-size:20px" type="text" name="LName" placeholder="First Name">
    <br>
    <br />
    Enter your Contact number:
    <br>
    <input font-size="30px" style="padding:10px; width:500px;font-size:20px" type="text" name="ContactN" placeholder="Contact">
    <br>
    <br />
    Enter the date of First Shot:
    <br>
    <input font-size="30px" style="padding:10px; width:500px; font-size:20px" type="date" name="DateR" value="dd/mm/yy">
    <br>
    <br />
    Type of 1st Shot: 
    <p style="color: #C5C6C7">
        <input style="font-size:20px" type="radio" name="Fshot" value="BionTech" checked> BioNTech  &nbsp &nbsp
        <input style="font-size:20px" type="radio" name="Fshot" value="SinoVac"> SinoVac
    </p>
 

        </div>
    </center> 
    <br /><br>
    <input type="submit" style="font-size:22px" value="Book Now" class="hero-btn">

uj5u.com熱心網友回復：

以下代碼段應該可以完成這項作業：

const d=document.querySelector("[name=DateR]"),
  d2=document.querySelector("[name=DateS]"),
  t=[...document.querySelectorAll("[name=Fshot]")];
d.addEventListener("change",addDate);
t.forEach(e=>e.onclick=addDate);

function addDate(){
  if(!d.value) return; // exit quietly if no date has yet been selected
  const dat=new Date(d.value);
  dat.setDate(dat.getDate() 
   (t.find(e=>e.checked).value==="BionTech"
  ? 21 : 28));
  d2.value=dat.toISOString().slice(0,10);
}

<div>
Enter your First name:
<br>
<input font-size="30px" style="padding:10px; width:500px;font-size:20px"type="text" name="FName" placeholder="First Name">
<br>
<br />
Enter your Last name:
<br />
<input font-size="30px" style="padding:10px; width:500px;font-size:20px" type="text" name="LName" placeholder="Last Name">
<br>
<br />
Enter your Contact number:
<br>
<input font-size="30px" style="padding:10px; width:500px;font-size:20px" type="text" name="ContactN" placeholder="Contact">
<br>
<br />
Enter the date of First Shot:
<br>
<input font-size="30px" style="padding:10px; width:500px; font-size:20px" type="date" name="DateR" value="dd/mm/yy">
<br>
<br />
Type of 1st Shot: 
<p style="color: #C5C6C7">
    <input style="font-size:20px" type="radio" name="Fshot" value="BionTech" checked> BioNTech  &nbsp &nbsp
    <input style="font-size:20px" type="radio" name="Fshot" value="SinoVac"> SinoVac
</p>
<input font-size="30px" style="padding:10px; width:500px; font-size:20px" type="date" name="DateS" readonly>

 

    </div>
</center> 
<br /><br>
<input type="submit" style="font-size:22px" value="Book Now" class="hero-btn">
</div>

通用事件處理函式addDate()完成所有繁重的作業：

它收集第一個疫苗接種日期并dat從中創建一個 Date() 物件
它識別單擊了哪個單選按鈕，然后將 21 或 28 天添加到 Date 物件dat
然后它將字串化的值分配給dat第二個（只讀）日期輸入欄位。

JavaScriptDate物件允許通過使用.setDate(). Date 物件通過在必要時更改為下個月將“無效”日期數字轉換為有效日期。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/462497.html

標籤：javascript html

上一篇：將影像alt屬性值作為表單欄位值

下一篇：如何將2個物件合并為一個-javascript