在React的材料ui日历中禁用特定的日期 [英] Disable specific days in material ui calendar in React

问题描述

我正在将Material-ui v0.20.0用于React js这是我的DatePicker组件

I am using material-ui v0.20.0 for React js This is my DatePicker component

<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(){...}中写什么?

What should I write in disabledDate(){...} if I want to disable any of the day/s ?

推荐答案

此处是需要添加的示例代码.您可以参考此链接以获取更多详细信息- https://material-ui.com/components/pickers/#date-time-pickers

Here is the sample code that needed to be added. You can refer this link for more details - https://material-ui.com/components/pickers/#date-time-pickers

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

You can add condition according to your need in order to disable date.

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;

这篇关于在React的材料ui日历中禁用特定的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！