如何通过URL传递两个用户输入日期

Question

我有一个要求我需要使用＆lt; a href＆gt;通过URL传递两个日期（date和dateto），该日期显示了日期的报告。格式yyyy-mm-dd。 以下是我正在使用的代码。 这里 datefrom 和 dateto 在URL中将是用户选择的日期。

我已经使用无线电按钮选择了报告中要生成的列。用户将选择第一组列或第二组列。并且所选的一组列将在报告中显示。

从日期选择 ，日期和 集合之后，用户将单击“生成报告”按钮，该按钮转到另一个页面它显示了报告。

我该如何传递这两个日期值和无线电按钮条件以选择列。

UI在FTL（Freemarker）中。我还附上一个UI的图像，以更好地理解。

有两个不同的URL用于两组不同的列。 URL是

1. 第一组列：http：// localhost：9191/preview？__report = prodence_1.rptdesign＆amp; __format = pdf＆amp; datefrom = 2022-06-10＆amp;
2. dateto //localhost:

9191/preview？__report = production_2.rptdesign& __format = pdf&； datefrom = 2022-06-10＆dateto = 2022-06-10如果用户选择了第1列列One ＆lt; a href＆a href＆gt; dateto = 2022-06-10将使用，如果用户选择第二组列，将使用另一列＆lt; a href＆gt;。我尚未完成编码部分。我该如何在FTL中实现这一目标？

<input type="date" id="quality-fromdate">
<input type="date" id="quality-toDate">

<input id="radiobutton1" type="radio" name="radio-button">
<div class="select-columns-options-1" id="select-columns-options1">
  <option value="tasks">Product Name</option>
  <option value="tasks">Order Id</option>
  <option value="tasks">Quantity Ordered</option>
  <option value="tasks">Quantity To Produce</option>
  <option value="tasks">Due Date</option>
  <option value="tasks">Estimated Completion Time</option>
</div>
<input id="radiobutton2" type="radio" name="radio-button">
<div class="select-columns-options-2">
  <option value="tasks">Product Name</option>
  <option value="tasks">Quantity Ordered</option>
  <option value="tasks">Quantity To Produce</option>
</div>
<a href="http://localhost:9191/preview?__report=production_1.rptdesign&__format=pdf&DateFrom=2022-06-10&DateTo=2022-06-10">Generate Report</a>

Answer 1

我不会在此处使用＆lt; a＆gt;，因为必须动态生成URL。这是使用按钮的示例，并在单击按钮时弄清楚URL。如果您绝对必须使用＆lt; a＆gt;，则可能必须绑定到更改日期和收音机的事件中，并更新href <href < /代码> ＆lt; a＆gt;的/代码>。

const btnclick = () => {
  let radio = document.querySelector("input[type='radio']:checked").id === "radiobutton1" ? 1 : 2;
  let from = document.querySelector("#quality-fromdate").value;
  let to = document.querySelector("#quality-toDate").value;
  
  console.log(`http://localhost:9191/preview?__report=production_${radio}.rptdesign&__format=pdf&DateFrom=${from}&DateTo=${to}`)

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

To: <input type="date" id="quality-fromdate"> From: <input type="date" id="quality-toDate">
<br/>
<input id="radiobutton1" type="radio" name="radio-button" checked>
<select class="select-columns-options-1" id="select-columns-options1">
  <option value="tasks">Product Name</option>
  <option value="tasks">Order Id</option>
  <option value="tasks">Quantity Ordered</option>
  <option value="tasks">Quantity To Produce</option>
  <option value="tasks">Due Date</option>
  <option value="tasks">Estimated Completion Time</option>
</select>
<br/>
<input id="radiobutton2" type="radio" name="radio-button">
<select class="select-columns-options-2">
  <option value="tasks">Product Name</option>
  <option value="tasks">Quantity Ordered</option>
  <option value="tasks">Quantity To Produce</option>
</select>
<br/>
<button onclick="btnclick()">Generate Report</button>

Answer 2

您还有很多要走的方法，这里是使用EventListener和URL对象使用的工作版本，

我没有测试您还需要与ID等更一致的日期

等。我假设您的链接需要两个选择（它们是代码中的Divs）

const url = new URL("http://localhost:9191/preview?__format=pdf")
const linkSpan = document.getElementById("link");
const dateFrom = document.getElementById("quality-fromDate")
const dateTo = document.getElementById("quality-toDate")
const reportType1 = document.getElementById("select-columns-options1");
const reportType2 = document.getElementById("select-columns-options2");
document.getElementById("reportDiv").addEventListener("click", function(e) {
  linkSpan.innerHTML = "";
  const reportRad = document.querySelector("[name=radio-button]:checked")
  if (!reportRad) return;
  if (reportType1.selectedIndex < 1 || reportType2.selectedIndex < 1) return; // nothing selected
  url.searchParams.set("__report", reportRad.id === "radiobutton1" ? "production_1.rptdesign" : "production_2.rptdesign")
  url.searchParams.set("__reportType1", reportType1.value);
  url.searchParams.set("__reportType2", reportType2.value);
  url.searchParams.set("DateFrom", dateFrom.value)
  url.searchParams.set("DateTo", dateTo.value)
  linkSpan.innerHTML = `<a href="${url.toString()}">${reportType1.options[reportType1.selectedIndex].text} - ${reportType2.options[reportType2.selectedIndex].text}</a>`;
})

<div id="reportDiv">
  <input type="date" id="quality-fromDate">
  <input type="date" id="quality-toDate">

  <input id="radiobutton1" type="radio" name="radio-button">
  <select class="select-columns-options-1" id="select-columns-options1">
    <option value="pname">Product Name</option>
    <option value="oid">Order Id</option>
    <option value="qo">Quantity Ordered</option>
    <option value="qp">Quantity To Produce</option>
    <option value="ddd">Due Date</option>
    <option value="ect">Estimated Completion Time</option>
  </select>
  <input id="radiobutton2" type="radio" name="radio-button">
  <select class="select-columns-options-2" id="select-columns-options2">
    <option value="pname">Product Name</option>
    <option value="qo">Quantity Ordered</option>
    <option value="qtp">Quantity To Produce</option>
  </select>
  <span id="link"></span>
</div>