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

Posted 2023-02-22

【中文标题】在 React 中禁用材料 ui 日历中的特定日期

【英文标题】：Disable specific days in material ui calendar in React

【发布时间】：2018-09-04 14:30:10

【问题描述】：

我正在为 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()... 中写什么？

【参考方案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;

【讨论】：

感谢您的帮助

@jaypluto - 如果它帮助您解决问题，您可以将此答案设为已验证，以便其他人可以在遇到类似问题时找到它的帮助。

您的链接错误/过时，这可能是正确的material-ui-pickers.dev/api/DatePicker

如果我们想实现启用特定日期并禁用所有其他日期，我们该怎么做......就像有一个日期，我只想从那个特定日期启用它，我想只启用 7 天后和 7 天前的日期，所有其他日期都应该禁用，我们怎样才能做到这一点？

【参考方案2】：

考虑一下 上面的代码代码被剪掉了（演示代码在组件内部）

 disableWeekends(date) 
   /* date interdites french format dd/mm for all year ! 
    01/01
    01/05
    08/08
    14/07
    15/08
    01/11
    11/11
    25/12 
    replace date.getFullYear() by the desired year otherwise
    */
    // in the following array format is us month are starting from 0 till 11
    const dateInterditesRaw = [
      new Date(date.getFullYear(),0,1),
      new Date(date.getFullYear(),4,1),
      new Date(date.getFullYear(),7,8),
      new Date(date.getFullYear(),6,14),
      new Date(date.getFullYear(),7,15),
      new Date(date.getFullYear(),10,1),
      new Date(date.getFullYear(),10,11),
      new Date(date.getFullYear(),11,25),
    ];

    /* make a new array with the getTime() without it date comparaison are 
    never true  */

    const dateInterdites = dateInterditesRaw.map((arrVal) => return 
    arrVal.getTime());

    /*exclude all sunday and use the includes array method to check if the 
    date.getTime() value is 
    in the array dateInterdites */

    return date.getDay() === 0 || dateInterdites.includes(date.getTime());
  

render() 
  return(
         <DatePicker 
          floatingLabelText="Jour de la visite" 
          value=this.props.dateVisite 
          shouldDisableDate=this.disableWeekends
          onChange=this.handleChangeDateVisit
      />
 );

【参考方案3】：

在更新后的 API 中，它是“disablePast”属性。

查看https://material-ui-pickers.dev/api/DatePicker

【参考方案4】：

特定日期：

示例：禁用 2021 年 5 月 3 日

<DatePicker
  shouldDisableDate=(date) => date.getTime() === new Date('2021-05-03T00:00').getTime()
/>

【讨论】：

无法弄清楚如何处理数组中的多个日期，例如[new Date('2021-05-03'), new Date('2021-05-04')]

@sFritsch09 找到解决方案了吗？

是的，我做到了，它不适用于 MaterialUI DatePicker！您必须选择 HackerOne 的 ReactDatePicker 才能排除日期数组 => reactdatepicker.com/#example-exclude-dates

没关系，我实现了我正在寻找的功能。

【参考方案5】：

   const disabledDays = (date) => 
    return !myDates.map((myDate) => new Date(myDate).getTime()).includes(date.getTime());
  ;

Para deshabilitar un array de fechas especificas