从当前日期开始，以前的日期被禁用

在开发过程中，有时需要限制用户选择的日期范围。本文将介绍如何实现从当前日期开始，以前的日期被禁用。

实现思路

1. 获取当前日期；
2. 将当前日期作为最小日期，设置给日期选择器；
3. 监听日期选择器的选择事件，当选择的日期小于当前日期时，阻止选择。

实现代码

HTML

<label for="datepicker">日期：</label>
<input type="text" id="datepicker">

JavaScript

$(function() {
  // 获取当前日期
  var nowDate = new Date();
  // 将当前日期格式化为字符串
  var nowDateString = nowDate.getFullYear() + '-' + (nowDate.getMonth() + 1) + '-' + nowDate.getDate();
  // 设置日期选择器的最小日期为当前日期
  $('#datepicker').datepicker({
    minDate: nowDateString
  });

  // 监听日期选择器的选择事件
  $('#datepicker').on('change', function() {
    // 获取选择的日期
    var selectedDate = new Date($(this).val());
    // 如果选择的日期小于当前日期，阻止选择
    if (selectedDate < nowDate) {
      $(this).val(nowDateString);
      alert('请选择' + nowDateString + '以后的日期');
    }
  });
});

解释说明

首先，在 HTML 中创建一个日期选择器，设置 ID 为“datepicker”。在 JavaScript 中，使用 jQuery 的 datepicker 插件初始化日期选择器，并将最小日期设置为当前日期。然后，监听日期选择器的选择事件，获取选择的日期，并和当前日期进行比较，如果选择的日期小于当前日期，就阻止选择，并弹出提示框。

总结

通过以上实现代码，可以实现从当前日期开始，以前的日期被禁用的功能。如果要限制日期范围，还可以使用 datepicker 插件提供的 maxDate、yearRange 等选项，具体可参考官方文档。