如何移除Material DatePicker中显示的禁用年份？

Android平台方案 #

默认Material DatePicker的年份选择器会展示范围内所有年份，哪怕部分被禁用。要移除1998-2009年这类特定区间的年份，可通过自定义年份适配器实现：

• 第一步：创建自定义YearPickerAdapter，继承默认适配器并过滤目标年份

class FilteredYearPickerAdapter(
    context: Context,
    minYear: Int,
    maxYear: Int,
    private val excludedYears: IntRange
) : MaterialYearPickerAdapter(context, minYear, maxYear) {
    override fun getYears(): List<Int> {
        return super.getYears().filterNot { it in excludedYears }
    }
}

• 第二步：构建DatePicker时替换默认适配器

val datePicker = MaterialDatePicker.Builder.datePicker()
    .setTitleText("选择日期")
    .setSelection(MaterialDatePicker.todayInUtcMilliseconds())
    .build()

datePicker.addOnShowListener {
    val yearPicker = datePicker.findViewById<MaterialYearPicker>(com.google.android.material.R.id.mtrl_picker_year_picker)
    yearPicker?.adapter = FilteredYearPickerAdapter(
        requireContext(),
        1980, // 你的最小可选年份
        2024, // 你的最大可选年份
        1998..2009 // 需要移除的年份区间
    )
}

datePicker.show(supportFragmentManager, "DATE_PICKER_TAG")

Web端（React MUI）方案 #

通过renderYear属性自定义年份渲染逻辑，直接跳过目标年份的渲染：

import { DatePicker } from '@mui/material';
import TextField from '@mui/material/TextField';

function CustomDatePicker() {
  // 生成1998-2009的年份数组
  const excludedYears = Array.from({ length: 2009 - 1998 + 1 }, (_, i) => 1998 + i);

  const renderYear = (year) => {
    if (excludedYears.includes(year)) return null; // 不渲染禁用年份
    return <span>{year}</span>;
  };

  return (
    <DatePicker
      label="选择日期"
      minDate={new Date('1980-01-01')}
      maxDate={new Date('2024-12-31')}
      renderYear={renderYear}
      onChange={(date) => console.log(date)}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

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