选择单选按钮时重置日期输入字段

Question

我有一个问题如何在选择特定的单选按钮时重置日期输入字段。 Currently I use a Javascript to reset two radio buttons when the radio button "inactive" is selected.这是有效的。但我无法让它对日期输入字段值起作用。

目标：当单选按钮“vacation-inactive”被选中时，重置所有单选按钮和所有日期输入值。

实现此功能的最佳方法是什么？谢谢

    document.getElementById('vacation-inactive').addEventListener('click', function () {
      ["vacation-immediately", "vacation-planned"].forEach(function(id) {
        document.getElementById(id).checked = false;
      });
      return false;
    })

/* Vacation input fields */
/* Hide & Show */
.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 100px; /* little bit of a magic number :( */
  overflow: visible;
}

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked ~ &,
  input[type="checkbox"]:checked ~ & {
    opacity: 1;
    max-height: 100px;
    overflow: visible;
    padding: 10px 20px;
    transform: scale(1);
  }
}

  /* Radio buttons */
.wrapper{
  display: inline-flex;
  background: #fff;
  height: 100px;
  width: 400px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 0px;
  /* box-shadow: 5px 5px 30px rgba(0,0,0,0.2);*/
}
.wrapper .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0px 15px 0px 0px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #0069d9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}

/* Vacation activ OR inactive */
#vacation-inactive:checked:checked ~ .vacation-inactive,
#vacation-active:checked:checked ~ .vacation-active{
  border-color: #0069d9;
  background: #0069d9;
}
#vacation-inactive:checked:checked ~ .vacation-inactive .dot,
#vacation-active:checked:checked ~ .vacation-active .dot{
  background: #fff;
}
#vacation-inactive:checked:checked ~ .vacation-inactive .dot::before,
#vacation-active:checked:checked ~ .vacation-active .dot::before{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
#vacation-inactive:checked:checked ~ .vacation-inactive span,
#vacation-active:checked:checked ~ .vacation-active span{
  color: #fff;
}



/* Vacation Mode */
#vacation-immediately:checked:checked ~ .vacation-immediately,
#vacation-planned:checked:checked ~ .vacation-planned{
  border-color: #0069d9;
  background: #0069d9;
}
#vacation-immediately:checked:checked ~ .vacation-immediately .dot,
#vacation-planned:checked:checked ~ .vacation-planned .dot{
  background: #fff;
}
#vacation-immediately:checked:checked ~ .vacation-immediately .dot::before,
#vacation-planned:checked:checked ~ .vacation-planned .dot::before{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
#vacation-immediately:checked:checked ~ .vacation-immediately span,
#vacation-planned:checked:checked ~ .vacation-planned span{
  color: #fff;
}


/* Vacation date picker */
[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input#vacation_date {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 5px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
  width: 190px;
}

label#vacation_date {
  display: block;
}

<h3>Start Vacation?</h3>
<div class="wrapper">
   <input type="radio" name="SelectVacationMode" id="vacation-inactive" value="vacation_inactive" checked>
   <label for="vacation-inactive" class="option vacation-inactive">
      <div class="dot"></div>
      <span>Inaktiv</span>
   </label>
   <div class="wrapper">
      <input type="radio" name="SelectVacationMode" id="vacation-active" value="vacation_active">
      <label for="vacation-active" class="option vacation-active">
         <div class="dot"></div>
         <span>Aktiv</span>
      </label>
      <div class="reveal-if-active">
         <input type="radio" name="SelectVacationType" id="vacation-immediately" value="immediately_vacation">
         <label for="vacation-immediately" class="option vacation-immediately">
            <div class="dot"></div>
            <span>Sofort</span>
         </label>
         <div>
            <input type="radio" name="SelectVacationType" id="vacation-planned" value="date_vacation">
            <label for="vacation-planned" class="option vacation-planned">
               <div class="dot"></div>
               <span>Planen</span>
            </label>
            <div class="reveal-if-active">
               <label id="vacation_date" for="start">Start date</label>
               <input type="date" min="<?php echo date("Y-m-d"); ?>" id="vacation_date" name="vacation-start" required>
               <label id="vacation_date" for="end">End date</label>
               <input type="date" min="<?php echo date("Y-m-d"); ?>" id="vacation_date" name="vacation-end" required>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

根据this answer，我会给每个输入字段一个id，例如第一个：

<input id="myDate" type="date" min="<?php echo date("Y-m-d"); ?>" id="vacation_date" name="vacation-start" required>

然后在你输入一个值后在控制台中尝试这个命令，它会清除这个值。

document.getElementById("myDate").value = "";