themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.82k stars 406 forks source link

Datepicker should allow certain dates to be "disabled for selection" #1201

Open verzac opened 7 months ago

verzac commented 7 months ago

Summary

We could introduce an additional prop into Datepicker called tilesDisabled which accepts a function that tells Datepicker which dates should be "disabled for selection". If 30th of Nov is disabled, then (1) the user shouldn't be able to select it; and (2) the appropriate "graying-out" is applied to the tile.

We can probably follow the func signature in react-calendar for this https://github.com/wojtekmaj/react-calendar/wiki/Recipes#selectively-disable-tiles

import React, { useState } from 'react';
import Calendar from 'react-calendar';

const disabledDates = [tomorrow, in3Days, in5Days];

function tileDisabled({ date, view }) {
  // Disable tiles in month view only
  if (view === 'month') {
    // Check if a date React-Calendar wants to check is on the list of disabled dates
    return disabledDates.find(dDate => isSameDay(dDate, date));
  }
}

function MyApp() {
  const [value, setValue] = useState(new Date());
  // technically this would be <Datepicker />
  return (
    <Calendar
      onChange={onChange}
      value={date}
      tileDisabled={tileDisabled}
    />
  );
}

I guess this is an RFC haha - I'm happy to look into implementing it if we're OK with the proposed API, though performance might need some consideration. I looked around the repo's Issues and couldn't find any mention of this.

I had a look at the Datepicker source-code and this should be doable. Edge-cases would be annoying though, so there's a chance I'd run out of time before I can finish this.

Context

I can do the same thing with react-calendar, but frankly I can't be bothered to style it myself since I'd rather keep everything under one theme (i.e. the Flowbite theme), and plus the Flowbite Datepicker already looks gorgeous enough for me.

Ultimately, I want to disable certain dates from selection because I'd want the user to only select dates that have "data" in them (e.g. in the context of my mental health journalling app, it doesn't make sense for the user to navigate to a date that doesn't have any journal entries).