Question

我想使用datetime-local输入2个日期的日期时间。第一个日期输入（id ='fd'）：

<input type="datetime-local" id='fd' name="firstDate">
<script>
var date = new Date(),
fd = document.getElementById('fd');
fd.value = date.toISOString();  
</script>

我希望第二个日期（id ='sd'）输入字段：

<input type="datetime-local" id='sd' name="secondDate">

仅允许在第一个日期之后的值（日期）（id ='fd'）。任何帮助都将不胜感激。

Answer 1

使用JQuery可能会帮助你。您可以通过此验证忽略进一步的操作。

var date = new Date();
var fd = document.getElementById('fd');
fd.value = date.toISOString();

$(document).ready(function() {
  $('#sd').focusout(function() {
    var sdVal = $(this).val();
    if (sdVal > fd.value)
      alert("Dude! I'm bigger than you!");
  });
});

Answer 2

收听change的{{1}}事件，并将fd属性设置为min。我们可以预期浏览器不允许用户指定更早的日期。（我发现桌面Chrome允许指定早于sd属性的日期。因此我们需要在提交时比较valueAsNumber，或启用交互式表单验证。）

min

我们需要处理用户首先指定document.querySelector('#fd').addEventListener('change', function(event) { if (event.target.value.length == 0) return; // Allow one minute after the first date, or later. var min = event.target.valueAsNumber + 60 * 1000; var minString = new Date(min).toISOString(); // Remove ':ss.sssZ'. minString = minString.substr(0, minString.length - 8); document.querySelector('#sd').min = minString; }, false);日期的情况。

以datetime-local格式在另一个日期之后的日期

2 个答案: