根据开始时间使用日期时间本地输入类型设置结束时间的最小值

Question

我在表单上有一个开始日期/时间和结束日期/时间字段，使用

type="datetime-local"

我希望将结束日期/时间最小值设置为开始日期/时间值。

我可以使用以下脚本设置最小日期值，但时间部分不起作用。设置第一个值后查看页面代码，我确实看到设置了完整值（例如：min =“2024-11-13T18：55”）。但是，日期选择器不限制时间。

           
                          
let fDate = document.querySelector('#start');
let tDate = document.querySelector('#end');

fDate.addEventListener('change', function() {
  tDate.min = this.value;
});
                            $(document).ready(function(){
  $('.first').keyup(function(){
    var a = $(this).val();
    $('.second').attr('min',a);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form>
<label>Start Date</label><br>
<input type="datetime-local" class="" name="startDate" id="start" value="">
<br>
<label>End Date</label><br>
<input type="datetime-local" class="" name="issueDate" id="end" value="">
</form>

Answer 1

就是这样：
原生日期选择器不限制时间。

您可以使用表单验证（使用

required

）来检测此错误：

const myForm = document.querySelector('#my-form');

myForm.start_date.addEventListener('change', e =>
  {
  myForm.end_date.min = myForm.start_date.value + ':00';
  });

label { 
  display   : block;
  margin    : 1rem;
  font-size : .8rem;
  }
label > input {
  display   : block;
  font-size : 1rem;
  } 

<form id="my-form">
  <label>
    Start Date
    <input type="datetime-local" name="start_date" required>
  </label> 
  <label>
    End Date
    <input type="datetime-local" name="end_date" required>
  </label> 
  <button>submit</button>
</form>

您还可以使用自定义日期选择器（在 gitHub 上搜索）。