[ADD] selectedDateState as optional prop for DatePicker to ease implementation when selectedDateState is handled by ancestor

[gaabgonca]

Add selectedDateState prop to DatePicker and DatePickerProvider to handle selectedDate state from outside DatePicker component.

The absence of selectedDateState keeps the previously defined behavior, it's entirely optional.

This allows an easier implementation when selectedDateState is being handled by an ancestor component of the DatePicker. For instance, you have a form with a Date field and you need to provide the initial value based on fetched data. Putting that Date inside options prop can get messy and lead to unnecessary rebuilds or inconsistencies.

[OMikkel]

Hey,

Appreciate the pull request, have you tested it?

I am currently living abroad and unable to test this PR.

If it is tested and works as intended I am happy to merge this request 😃

[gaabgonca]

I'm currently using the changes proposed in a project without any issue

const options = {
  autoHide: true,
  todayBtn: true,
  clearBtn: true,
  maxDate: new Date('2030-01-01'),
  minDate: new Date('2023-01-01'),
  theme: {
    background: 'bg-white',
    todayBtn: '',
    clearBtn: '',
    icons: '',
    text: '',
    disabledText: '',
    input: 'w-72 place-self-end',
    inputIcon: '',
    selected: '',
  },
  icons: {
    prev: () => <span>{'<'}</span>,
    next: () => <span>{'>'}</span>,
  },
  datepickerClassNames: 'relative w-72 top-2 p-t-0',
  language: 'es',
}

export default function CustomDatePicker({}) {
  const [currentEvent, setCurrentEvent] = useContext(CurrentEventContext)

  const [show, setShow] = useState<boolean>(false)

  const handleClose = (state: boolean) => {
    setShow(state)
  }

  const setEventDate = (date: Date) => {
    const cleanDateSeconds: number =
      new Date(
        date.getFullYear(),
        date.getMonth(),
        date.getDate(),
        0,
        0,
        0,
        0,
      ).getTime() / 1000

    setCurrentEvent({
      ...currentEvent,
      eventDate: new Timestamp(cleanDateSeconds, 0),
    })
  }

  return (
    <div className="max-w-min">
      <DatePicker
        options={options}
        show={show}
        setShow={handleClose}
        selectedDateState={[currentEvent.eventDate.toDate(), setEventDate]}
      ></DatePicker>
    </div>
  )
}

It looks like this on the initial render with fetched data and behaves as expected upon interaction

[OMikkel]

Looks good the changes have been merged 🙂