如何使用jQuery将多个date类型输入框的值插入a标签href属性

问题根因 #

• 你绑定的keyup事件仅能捕获键盘输入操作，<input type="date">通过自带日期选择器点选赋值时不会触发该事件，导致href赋值逻辑不执行。这也是text类型输入时功能正常、换成date类型就失效的核心原因，text输入全程依赖键盘输入，能稳定触发keyup事件。
• 直接调用$(".inpDate").val()只能获取到匹配类名的第一个输入框的值，无法按需求分别拿到两个日期值。

修正后的代码 #

// 同时绑定input、change事件，覆盖键盘输入、点选日期两种场景
$(".inpDate").on("input change", function(e) {
  // 按索引分别获取两个日期输入框的值
  const date1 = $(".inpDate").eq(0).val();
  const date2 = $(".inpDate").eq(1).val();
  // 两个日期都填写完成再更新href，避免空参数
  if (date1 && date2) {
    $('#getDate').attr("href", `?page=d_jurnal_laporan/&date1=${date1}&date2=${date2}`);
  }

  // 保留原回车键跳转逻辑
  if(e.keyCode === 13){
    const address = $('#getDate').attr('href');
    address && (window.location = address);
  } 
})

内容的提问来源于stack exchange，提问作者user16675523