在 React 中禁用材料 ui 日历中的特定日期

Question

我正在为 React js 使用 material-ui v0.20.0 这是我的 DatePicker 组件

<Field
    name='appointmentDate'
    label="Select Date"
    component={this.renderDatePicker}
/>

renderDatePicker = ({ input, label, meta: { touched, error }, ...custom,props }) => {
    return (
        <DatePicker
          {...input}
          {...custom}
          autoOk={true}
          floatingLabelText={label}
          dateForm='MM/DD/YYYY'
          shouldDisableDate={this.disabledDate}
          minDate={ new Date()}
          value={ input.value !== '' ? input.value : null }
          onChange={(event, value) => input.onChange(value)}
        />
    );
};

如果我想禁用任何一天，我应该在 disabledDate(){…} 中写什么？

原文由 jay pluto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是需要添加的示例代码。您可以参考此链接了解更多详情 - https://material-ui.com/components/pickers/#date-time-pickers

您可以根据需要添加条件以禁用日期。

 import React from 'react';
import DatePicker from 'material-ui/DatePicker';

function disableWeekends(date) {
  return date.getDay() === 0 || date.getDay() === 6;
}

function disableRandomDates() {
  return Math.random() > 0.7;
}
/**
 * `DatePicker` can disable specific dates based on the return value of a callback.
 */
const DatePickerExampleDisableDates = () => (
  <div>
    <DatePicker hintText="Weekends Disabled" shouldDisableDate={disableWeekends} />
    <DatePicker hintText="Random Dates Disabled" shouldDisableDate={disableRandomDates} />
  </div>
);

export default DatePickerExampleDisableDates;

原文由 Harsh Makadia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我尝试通过以下步骤将我拥有的日子过滤为一系列日子：

1. 将字符串转换为 Date 对象。

2. 将 Date 对象转换为 timeStamp 以进行比较。

3. 将时间戳加上周末与我们日历中的所有日期进行比较。

    const disableBookedDays = (date) => {
      const convertedIntoDateObject = bookedDates.map((bookedDate) => {
         return new Date(bookedDate).getTime();
       });

      return date.getDay() === 0 || date.getDay() === 6 || convertedIntoDateObject.includes(date.getTime());
    };

原文由 Hoomi 发布，翻译遵循 CC BY-SA 4.0 许可协议