iOS中如何禁用Date Picker内的特定日期？

当然有办法实现，根据你使用的Date Picker组件库不同，实现方式略有差异，下面是几种主流场景的解决方案：

1. 基于UI组件库实现（推荐方案） #

绝大多数前端UI组件库都内置了日期禁用的配置项，只需传入自定义判断逻辑即可：

Element UI（Vue） #

使用disabled-date属性绑定判断函数，函数返回true则对应日期会被禁用：

<el-date-picker
  v-model="selectedDate"
  :disabled-date="disabledDate"
  type="date"
  placeholder="选择日期">
</el-date-picker>

<script>
export default {
  methods: {
    disabledDate(date) {
      // 禁用周末（周日为0，周六为6）
      const isWeekend = date.getDay() === 0 || date.getDay() === 6;
      
      // 自定义节假日列表，可从后台接口获取
      const holidays = ['2024-10-01', '2024-10-02', '2024-10-03'];
      const currentDateStr = date.toISOString().split('T')[0];
      const isHoliday = holidays.includes(currentDateStr);
      
      return isWeekend || isHoliday;
    }
  }
}
</script>

Ant Design（React） #

通过disabledDate属性实现，配合dayjs处理日期格式：

import { DatePicker } from 'antd';
import dayjs from 'dayjs';

const disabledDate = (current) => {
  // 禁用周末
  const isWeekend = current.day() === 0 || current.day() === 6;
  
  // 自定义节假日
  const holidays = ['2024-10-01', '2024-10-02', '2024-10-03'];
  const currentDateStr = current.format('YYYY-MM-DD');
  const isHoliday = holidays.includes(currentDateStr);
  
  return isWeekend || isHoliday;
};

const App = () => {
  return <DatePicker disabledDate={disabledDate} />;
};

jQuery UI Datepicker #

使用beforeShowDay选项，返回数组控制日期可用性：

<input type="text" id="datepicker">

<script>
$(function() {
  const holidays = ['2024-10-01', '2024-10-02', '2024-10-03'];
  
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      // 禁用周末
      const isWeekend = date.getDay() === 0 || date.getDay() === 6;
      // 检查是否为节假日
      const currentDateStr = $.datepicker.formatDate('yy-mm-dd', date);
      const isHoliday = holidays.includes(currentDateStr);
      
      // 返回格式：[是否可用, 自定义样式类名, hover提示文本]
      return [!isWeekend && !isHoliday, '', isWeekend ? '周末不可选' : isHoliday ? '节假日不可选' : ''];
    }
  });
});
</script>

2. 原生HTML日期输入框（简易方案） #

原生<input type="date">没有直接禁用特定日期的API，但可以通过监听输入事件拦截选择：

<input type="date" id="nativeDateInput">

<script>
const input = document.getElementById('nativeDateInput');
const holidays = ['2024-10-01', '2024-10-02', '2024-10-03'];

input.addEventListener('input', function(e) {
  const selectedDate = e.target.value;
  const date = new Date(selectedDate);
  const isWeekend = date.getDay() === 0 || date.getDay() === 6;
  const isHoliday = holidays.includes(selectedDate);
  
  if (isWeekend || isHoliday) {
    alert('该日期不可选择，请重新选择');
    e.target.value = ''; // 清空已选日期
  }
});
</script>

注意：原生方案体验有限，用户先选中禁用日期才会触发拦截，适合简单场景使用。

核心逻辑总结 #

不管用哪种方案，核心步骤都是：

• 明确禁用规则：比如周末的星期判断、自定义节假日列表（可从后端接口动态获取）
• 给Date Picker传入判断函数，让组件自动识别并禁用符合规则的日期

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