How to add date function-CodePudding

I want to add (show too) 21 days to the 1st dose date if BioNTech was selected or add 28 days to the selected days if Sinovac was selected.

   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" >

CodePudding user response：

The following snippet should do the job:

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" >
</div>

The universal event handling function addDate() does all the heavy work:

it collects the first vaccination date and creates a Date() object dat from it
it identifies which radio button was clicked and then adds 21 or 28 days to the Date object dat
it then assigns the stringified value of dat to the second (readonly) date input field.

The JavaScript Date object allows for simple date adding by changing the "day of the month" part with .setDate(). The Date object converts "invalid" date numbers to valid dates by changing to the next month if necessary.