Django DateField如何不使用jQuery仅启用/高亮可选指定日期

场景1：允许的日期为连续区间 #

直接通过原生input date的min、max属性即可实现，浏览器会自动禁用区间外的日期，无需额外写JS，修改Forms.py即可：

class FilterDaywiseNew(forms.Form):
    search_Day = forms.DateField(
        widget=NumberInput(attrs={
            'type': 'date',
            'min': '2024-01-01', # 替换为你的最小允许日期
            'max': '2024-12-31'  # 替换为你的最大允许日期
        }),
        required=True,
        initial=datetime.date.today
    )

场景2：允许的日期为离散的指定日期 #

需要配合原生JavaScript做限制，步骤如下：

第一步：修改Views.py，传递允许的日期列表到模板 #

将你的指定日期转成YYYY-MM-DD格式的字符串列表，放入模板上下文：

def DayWiseFilterPage(request):
    # 替换为你自己的允许日期列表
    allowed_dates = [
        '2024-05-01',
        '2024-05-03',
        '2024-05-05',
        '2024-05-10'
    ]
    form = FilterDaywiseNew()
    return render(request, 'agelist.html',{'form': form, 'allowed_dates': allowed_dates})

第二步：修改agelist.html，添加原生JS校验逻辑 #

<form method="post" action="SearchDisplay" id="searchFilterForm">
    <div class="form-row">
        <div class="col-md-8 mb-0">
            {{ form.search_Day|as_crispy_field }}
            <small id="dateTip" style="color: red; display: none;">请选择允许的日期</small>
        </div>
    </div>
</form>

<script>
// 读取允许的日期列表，转成Set提高查询效率
const allowedDates = new Set({{ allowed_dates|safe }});
const dateInput = document.getElementById('id_search_Day');
const dateTip = document.getElementById('dateTip');

// 实时校验选中的日期
dateInput.addEventListener('input', function() {
    const selectedDate = this.value;
    if (selectedDate && !allowedDates.has(selectedDate)) {
        this.value = '';
        dateTip.style.display = 'inline';
        setTimeout(() => dateTip.style.display = 'none', 3000);
    }
});

// 表单提交前二次校验，防止绕过前端限制
document.getElementById('searchFilterForm').addEventListener('submit', function(e) {
    const selectedDate = dateInput.value;
    if (selectedDate && !allowedDates.has(selectedDate)) {
        e.preventDefault();
        dateTip.style.display = 'inline';
        setTimeout(() => dateTip.style.display = 'none', 3000);
    }
});
</script>

如需实现日期高亮禁用的视觉效果 #

原生浏览器的日期选择弹窗属于系统内置控件，无法直接通过CSS修改样式，如果必须要高亮指定日期的效果，可以使用无依赖的轻量日期选择库，配置enable参数指定允许的日期即可实现高亮效果，完全不需要jQuery。

注意：前端限制仅用于优化用户体验，后端必须额外添加日期校验逻辑，避免用户通过修改前端代码提交不符合要求的日期。

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