英文:
Past and date comparison condition
问题
以下是代码的翻译部分：
<tr>
<td><label for="maintsd">维护开始日期 (<%=tzShort%>)</label></td>
<td><input style="border:1px solid grey; width: 100%" type="datetime-local" id="maintsd" required="true" name="maintsd"></td><td></td>
</tr>
<tr>
<td>
<label for="mainted">维护结束日期 (<%=tzShort%>)</label>
</td>
<td>
<input style="border:1px solid grey; width: 100%" type="datetime-local" id="mainted" required="true" name="mainted">
</td>
</tr>
以下是日期被保存的代码：
public String getMaintEDString() {
// ZoneId z = ZoneId.systemDefault();
LocalDateTime datetime = LocalDateTime.ofInstant(this.maintED, ZoneId.systemDefault());
this.maintEDString = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm").format(datetime);
return maintEDString;
}
public String getMaintSDString() {
// ZoneId z = ZoneId.of("America/Los_Angeles");
LocalDateTime datetime = LocalDateTime.ofInstant(this.maintSD, ZoneId.systemDefault());
this.maintSDString = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm").format(datetime);
return maintSDString;
}
英文:
With the below code, I'm unable to set the following:
- Start date should be of future
- End date should be higher than start date
<!-- lang: jsp -->
<tr>
<td><label for="maintsd">Maintenance Start Date (<%=tzShort%>)</label></td>
<td><input style="border:1px solid grey; width: 100%" type="datetime-local" id="maintsd" required="true" name="maintsd"></td><td></td>
</tr>
<tr>
<td>
<label for="mainted">Maintenance End Date (<%=tzShort%>)</label>
</td>
<td>
<input style="border:1px solid grey; width: 100%" type="datetime-local" id="mainted" required="true" name="mainted">
</td>
Date is in T format.
Date which is being saved is retrieved as below:
public String getMaintEDString() {
// ZoneId z = ZoneId.systemDefault();
LocalDateTime datetime = LocalDateTime.ofInstant(this.maintED, ZoneId.systemDefault());
this.maintEDString = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm").format(datetime);
return maintEDString;
}
public String getMaintSDString() {
// ZoneId z = ZoneId.of( "America/Los_Angeles" );
LocalDateTime datetime = LocalDateTime.ofInstant(this.maintSD, ZoneId.systemDefault());
this.maintSDString = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm").format(datetime);
return maintSDString;
}
答案1
得分: 1
你可以在输入框中使用min属性，并设置最小日期，这将禁用所有先前的日期，例如：min="<%=tzShort%>"，然后在点击提交按钮时获取开始和结束日期两个输入，比较这两个值，根据比较结果显示错误消息或提交表单。
演示代码 :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function validate() {
// 获取开始和结束日期并转换为日期对象
var sdate = new Date(document.getElementById("maintsd").value);
var edate = new Date(document.getElementById("mainted").value);
var flag = true; // 用于验证的标志
// 如果结束日期大于等于开始日期
if (edate >= sdate) {
console.log("结束日期大于开始日期");
document.getElementById("error").innerHTML = "";
} else {
flag = false;
document.getElementById("error").innerHTML = "*结束日期应大于开始日期"; // 显示此消息
}
return flag;
}
<!-- language: lang-html -->
<!--onsubmit 会调用 validate 函数-->
<form onsubmit="return validate();">
<table>
<tr>
<td><label for="maintsd">维护开始日期 (<%=tzShort%>)</label></td>
<td><input style="border:1px solid grey; width: 100%" type="datetime-local" id="maintsd" required="true" name="maintsd" value="2020-08-12T10:22" min="2020-08-12T10:22"></td>
<!-- 添加最小日期以禁用过去的日期-->
</tr>
<tr>
<td>
<label for="mainted">维护结束日期 (<%=tzShort%>)</label>
</td>
<td>
<input style="border:1px solid grey; width: 100%" type="datetime-local" id="mainted" required="true" name="mainted" value="2020-08-19T10:22" min="2020-08-12T10:22">
</td>
</tr>
</table>
<p id="error" style="color:red"></p>
<input type="submit">
</form>
<!-- end snippet -->
英文:
You can use min attribute in your input-box and set there min-date this will disable all previous date i.e : min="<%=tzShort%>" and then on click of submit button get both inputs i.e : start and end date compare both values and depending on this show error message or submit form.
Demo Code :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function validate() {
//get start and end date and convert to dates
var sdate = new Date(document.getElementById("maintsd").value);
var edate = new Date(document.getElementById("mainted").value);
var flag = true; //for validating
//if end date is greater
if (edate >= sdate) {
console.log("end_date is greater then strt_date");
document.getElementById("error").innerHTML = "";
} else {
flag = false;
document.getElementById("error").innerHTML = "*end_date should be greater then strt_date"; //show this message
}
return flag;
}
<!-- language: lang-html -->
<!--onsubmit validate will get called-->
<form onsubmit="return validate();">
<table>
<tr>
<td><label for="maintsd">Maintenance Start Date (<%=tzShort%>)</label></td>
<td><input style="border:1px solid grey; width: 100%" type="datetime-local" id="maintsd" required="true" name="maintsd" value="2020-08-12T10:22" min="2020-08-12T10:22"></td>
<!-- add min date so backdates with be disable-->
</tr>
<tr>
<td>
<label for="mainted">Maintenance End Date (<%=tzShort%>)</label>
</td>
<td>
<input style="border:1px solid grey; width: 100%" type="datetime-local" id="mainted" required="true" name="mainted" value="2020-08-19T10:22" min="2020-08-12T10:22">
</td>
</tr>
</table>
<p id="error" style="color:red"></p>
<input type="submit">
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论