Disable specific days in material ui calendar in React

Question

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)} 
        />
    );
};

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

Laguna

Answer 1

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;

Channing

Thanks for the help – Laguna

@jaypluto - You can make this answer as verified if it helped you to solve your problem so that others can find it help facing a similar issue. – Channing

Your link is wrong/outdated, this might be the right one material-ui-pickers.dev/api/DatePicker – Negris

if we want to achieve to enable specific dates, and disable all other dates, how can we do that.... Like there is a date and I want to enable that only from that particular date, i wan to enable only dates from 7 days later and 7 days earlier, all other dates should be disabled, how can we acheive that? – Glean

Answer 2

Consider this above code code is cutted (demo code is inside a component)

 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}
      />
 );
}
}

Opalescent

Answer 3

in the updated API it's the "disablePast" property.

check https://material-ui-pickers.dev/api/DatePicker

Carmella

Answer 4

I tried to filter the days I had as an array of days with the steps below:

1. converted strings into a Date object.

2. converted the Date objects into timeStamp for comparison.

3. compare timeStamps plus the weekends with all the dates we have in our calendar.

   const disableBookedDays = (date) => { 
      const convertedIntoDateObject = bookedDates.map((bookedDate) => {
         return new Date(bookedDate).getTime();
       });
   
      return date.getDay() === 0 || date.getDay() === 6 || convertedIntoDateObject.includes(date.getTime());
    };
   

Edict

Answer 5

For specific day:

Example: disable May 03 2021

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

Armilla

Can't figure out how to do this with multiple dates in an array, like [new Date('2021-05-03'), new Date('2021-05-04')] – Armilla

Have you found any solution @Armilla ? – Prettypretty

Yes I did, It does not work with MaterialUI DatePicker! You have to choose ReactDatePicker by HackerOne in order to exclude an array of dates => reactdatepicker.com/#example-exclude-dates – Armilla

Never mind, I implemented the feature I was looking for. – Prettypretty

Answer 6

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

Para deshabilitar un array de fechas especificas

Nernst

Answer 7

User or to add multiple specific dates

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

Tedmann