当然可以搞定！不用任何第三方插件，靠HTML5原生属性加一点点JavaScript就能实现只允许选择今天及以后的日期，过去的日期会自动变灰无法选中。

核心思路 #

HTML5的date类型输入框自带min属性，只要给它设置一个最小日期值（格式必须是YYYY-MM-DD），就能限制用户只能选择该日期及之后的日期。不过因为“今天”是动态变化的，所以最好用JS来实时设置这个值，避免静态写死日期导致第二天失效。

具体实现步骤 #

1. 修改你的input标签：保留原有属性，加上min属性（先留空，用JS动态赋值）
2. 用JS获取并格式化当前日期：把当前日期转换成YYYY-MM-DD的格式，赋值给input的min属性

完整代码示例 #

<input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date">

<script>
// 获取当前日期
const today = new Date();

// 处理月份：getMonth()返回0-11，所以要加1，并且个位数补0
const month = String(today.getMonth() + 1).padStart(2, '0');
// 处理日期：个位数补0
const day = String(today.getDate()).padStart(2, '0');
// 拼接成YYYY-MM-DD格式
const todayFormatted = `${today.getFullYear()}-${month}-${day}`;

// 给input设置min属性
document.getElementById('start').setAttribute('min', todayFormatted);
</script>

效果说明 #

设置完成后，打开日历控件时，所有过去的日期都会变成灰色，无法点击选择；用户只能选择今天或者未来的日期，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Kareem Sultan