使用 jqruery html5 原生选择器设置最小日期

Question

我在设置最小日期属性时遇到问题，在单个页面上我有 25 多个不同产品的输入类型日期。 我可以看到属性 min 的值设置为今天的日期，但我可以选择今天之前的日期（字段未禁用）

let today = new Date();
let dd = today.getDate();
let mm = today.getMonth() + 1;
let yyyy = today.getFullYear();
let dateList = $('.pickupdate');
let list = dateList.length;
let index = 0;
today = yyyy + '-' + mm + '-' + dd;
for (index = 0; index < list; ++index) {
  let dateList2 = dateList[index];
  $(dateList2).attr('min', today);
  dateList[index];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input 
  id="pickupdate" 
  type="date" 
  class="date-basic font-w-500 clr-white pickup m-0 datechk pickupdate" 
  name="pickupdate" 
  placeholder="dd/mm/yyyy"
  min="1899-01-01" max="" 
  value="{{$request->pickupdate}}" 
  required 
/>

Answer 1

问题是由于您生成的日期格式 - YYYY-M-D。要使其正常工作，必须为YYYY-MM-DD。因此，您需要在日期和月份值中包含前导零，这可以通过辅助函数轻松完成。

还请注意，我修改了您的逻辑以在每个日期字段上设置 attr()。如果您使用 jQuery，则使用 each() 方法循环元素，而不是 for。此外，循环本身是多余的，因为 jQuery 会为您完成。最后，如果您有重复的 HTML，请不要将 id 属性放在这些元素上，因为 id 在 DOM 中必须是唯一的。

说了这么多，试试这个：

let leadingZero = value => value.toString().padStart(2, '0').slice(-2);

let today = new Date();
let dd = leadingZero(today.getDate());
let mm = leadingZero(today.getMonth() + 1);
let yyyy = today.getFullYear();

$('.pickupdate').attr('min', `${yyyy}-${mm}-${dd}`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" class="pickupdate" name="pickupdate" placeholder="dd/mm/yyyy" min="1899-01-01" max="" value="" required />