Как добавить функцию даты

Я хочу добавить (также показать) 21 день к дате первой дозы, если был выбран BioNTech, или добавить 28 дней к выбранным дням, если был выбран Sinovac.

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

Вероятно, за вас проголосовали, потому что вы не приложили никаких усилий с вашей стороны для решения проблемы. SO не является бесплатной службой кодирования. Я просто застрял в поездке на поезде, и у меня было немного времени, и я собрал ответ. Пожалуйста, следуйте приведенным здесь инструкциям (Макви) для будущих вопросов.

Carsten Massmann 23.04.2022 13:11
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
1
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Следующий фрагмент должен выполнить эту работу:

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() выполняет всю тяжелую работу:

  • он собирает дату первой прививки и создает из нее объект Date() dat
  • он определяет, какой переключатель был нажат, а затем добавляет 21 или 28 дней к объекту Date dat
  • затем он присваивает строковое значение dat второму (только для чтения) полю ввода даты.

Объект JavaScript Date позволяет просто добавлять дату, изменяя часть «день месяца» на .setDate(). Объект Date преобразует «недопустимые» числа дат в действительные даты, при необходимости переходя к следующему месяцу.

Как, по-вашему, можно улучшить их способность к кодированию?

Chenuka Jayasuriya 23.04.2022 16:26

:D хороший вопрос! В конце концов, вам нужно будет сохранять непредубежденность, оглядываться вокруг и пробовать разные вещи. Никогда не бойтесь начинать с совершенно нового подхода, если вы понимаете, что текущий нежизнеспособен. Я не думаю, что есть определенный «короткий путь», который вы можете использовать.

Carsten Massmann 23.04.2022 16:33

Между прочим: я только что изменил первую строку в своем ответе, чтобы избежать повторения: выражение конструктора/деконструктора присваивает возвращаемые элементы из вызова ["R","S"].map() константам d и d2 в [d,d2].

Carsten Massmann 23.04.2022 16:45

Я всегда стремлюсь создавать лаконичный код без дублирования и повторений. В результате мой код не всегда легко читать, но, надеюсь, достаточно легко поддерживать.

Carsten Massmann 23.04.2022 16:47

Другие вопросы по теме