前端项目实战肆佰壹拾肆react-admin和material ui-material ui Autocomplete之禁用

前端歌谣

于 2023-09-09 20:01:40 发布

阅读量53

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/132540077

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

export default function DisabledOptions() {
  return (
    <Autocomplete
      id="disabled-options-demo"
      options={timeSlots}
      getOptionDisabled={(option) =>
        option === timeSlots[0] || option === timeSlots[2]
      }
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Disabled options" />}
    />
  );
}

// One time slot every 30 minutes.
const timeSlots = Array.from(new Array(24 * 2)).map(
  (_, index) =>
    `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${
      index % 2 === 0 ? '00' : '30'
    }`,
);