使用 Javascript 或 jquery 更改公式中两个输入字段的值

Posted 2023-05-09

【中文标题】使用 Javascript 或 jquery 更改公式中两个输入字段的值

【英文标题】：Change Value of two inpu Fields in a Formular with Javascribt or jquery

【发布时间】：2021-04-29 09:41:16

【问题描述】：

我有一个包含 2 个日期类型的输入字段（date1 和 date2）的表单。

我有不同的按钮。如果点击这些按钮，应该在表单字段中输入值。

单击按钮时，当前日期应插入“date2”字段中。 应在“date1”输入字段中插入当前日期减去 3 天。

日期必须采用“2018-01-22”格式。

其他按钮类似，只是扣除的天数不同。

我知道我需要 java 脚本。不幸的是，我对此一无所知。

<div class="form-group col-6 col-md-4 col-lg-3">
<label for="datumvon" class="col-form-label">Datum von: </label>
<input type="date" class="form-control ml-2 col-6" id="datumvon">
</div>
    
<div class="form-group col-6 col-md-4 col-lg-3">
<label for="datumbis" class="col-form-label">Datum bis: </label>
<input type="date" class="form-control ml-2 col-6" id="datumbis">
</div>

<button type="button" class="btn btn-outline-dark">3 Tage</button>
<button type="button" class="btn btn-outline-dark">7 Tage</button>
<button type="button" class="btn btn-outline-dark">14 Tage</button>
<button type="button" class="btn btn-outline-dark">30 Tage</button>
<button type="button" class="btn btn-outline-dark">90 Tage</button>

【参考方案1】：

像这样的一些杂音

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-6 col-md-4 col-lg-3">
<label for="datumvon" class="col-form-label">Datum von: </label>
<input type="date" class="form-control ml-2 col-6" id="datumvon">
</div>
    
<div class="form-group col-6 col-md-4 col-lg-3">
<label for="datumbis" class="col-form-label">Datum bis: </label>
<input type="date" class="form-control ml-2 col-6" id="datumbis">
</div>

<button type="button" class="btn btn-outline-dark" id="3-tage">3 Tage</button>
<button type="button" class="btn btn-outline-dark" id="7-tage">7 Tage</button>
<button type="button" class="btn btn-outline-dark" id="14-tage">14 Tage</button>
<button type="button" class="btn btn-outline-dark" id="30-tage">30 Tage</button>
<button type="button" class="btn btn-outline-dark" id="90-tage">90 Tage</button>

<script>

function updateDefaults(daysCount)
  let now = new Date();
  let day = ("0" + now.getDate()).slice(-2);
  let month = ("0" + (now.getMonth() + 1)).slice(-2);
  let today = now.getFullYear()+"-"+(month)+"-"+(day) ;
  
  $("#datumbis").val(today); 
  
  let laterNow = new Date(now.getTime() - daysCount*24*60*60*1000);
  let laterDay = ("0" + laterNow.getDate()).slice(-2);
  let laterMonth = ("0" + (laterNow.getMonth() + 1)).slice(-2);
  let laterToday = laterNow.getFullYear()+"-"+(laterMonth)+"-"+(laterDay) ;
  
  $("#datumvon").val(laterToday);


$("#3-tage").click(()=>  
   updateDefaults(3)
)

$("#7-tage").click(()=>  
 updateDefaults(7)
)


$("#14-tage").click(()=>  
 updateDefaults(14)
)

$("#30-tage").click(()=>  
 updateDefaults(30)
)

$("#90-tage").click(()=>  
 updateDefaults(90)
)


</script>

【讨论】：

我的意思是，它很棒。我有不止一门同名的班级。你能给我写一下它与按钮 id 一起工作的代码吗？例如：<button type="button" class="btn btn-outline-dark" id="beispielID">3 Tage</button>

@fschneider 当然，但现在不在我的电脑上。我明天会努力得到它

@fschneider 更新您的问题并输入按钮的 ID