MUIで特定の曜日と日付を無効にする方法は、json配列に基づいてdatepickerに反応しますか？

受付中プログラミング

2024-12-24

桃太郎

日付ピッカーで無効にする必要がある日付と曜日のjson応答を返すLaravelアプリがありますたとえば、これは私のdatesOff定数console.log()です['2022-05-08', '2022-05-11', '2022-05-19'] console.log()そしてこれは私がそれをするときのdaysOff定数です[3, 6] では、返される日付と曜日（この場合は水曜日と日曜日）の両方を無効にするにはどうすればよいですか？


          useEffect(() => {
              axios.get(bookingUrl).then((response) => {
                setDaysOff(response.data.daysOff);
                setDatesOff(response.data.datesOff);
                setBooked(response.data.booked);
              })
            }, []);
        
        
                     {
                    setDate(newDate);
                    }}
                    renderInput={(params) => }

回答一覧

DatePickerカレンダーの日のセルをカスタマイズするために使用できるrenderDayプロップがあります。3つの引数を取ります。最初の引数はDateオブジェクトであり、これを使用して、無効にする必要のある日付の配列と比較できます。


         const dates = ["2022-05-08", "2022-05-11", "2022-05-19"];
        
          const customDayRenderer = (
            date: Date,
            selectedDates: Array,
            pickersDayProps: PickersDayProps
          ) => {
            const stringifiedDate = date.toISOString().slice(0, 10);
            if (dates.includes(stringifiedDate)) {
              return ;
            }
            return ;
          };
        
          return (
            
               {
                  setValue(newValue);
                }}
                renderInput={(params) => }
                renderDay={customDayRenderer}
              />
            
          );

桃太郎

ログインして回答する