Get selected value in flowbite-react Datepicker component - Props change event not working

Question

I am having an issue getting the selected value from the Datepicker component from the flowbite-react library. Using with NextJS.
The component displaying nicely.
I have tried the following code, but return nothing when the date is selected:

import { Datepicker } from "flowbite-react";

export default function ExampleComp(){
 return (
   <Datepicker
       onChange={(e) => console.log(e)} // not working
       onSelect={(e) => console.log(e)} // not working
       onInput={(e) => console.log(e)} // not working
       onSelectedDateChanged={(e) => console.log(e)} // Error: Does not exist on type 'IntrinsicAttributes & DatepickerProps'
      />
  )
}

Nothing specific use case in the official documentation page but in storybook there is prop onSelectedDateChanged. I'm using it but Error: Does not exist on type 'IntrinsicAttributes & DatepickerProps
Kindly help.

version

• "flowbite": "^1.8.1",
• "flowbite-react": "^0.6.0",
• "tailwindcss": "3.3.3",
• "next": "13.4.19"

Dysgenic

Experiencing exact the same issue right now! Must be onChange but is doing nothing. – Keeley

Could you provide a codesandbox example of the issue? – Danielldaniella

Were you able to figure this out? Having a similar issue. Thanks. – Paddlefish

Answer 1

const handleDateChange = (date) => {
    console.log(date);
  };
<Datepicker onSelectedDateChanged={handleDateChange}/>

Mercurialism

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Biysk

Answer 2

onSelectedDateChanged worked for me, passing a function to this props, and getting the required output, using it with react from hook like this

<Controller name="date"
            control={control}
            rules={{ required: 'Date is required' }}
            render=
            {({ field }) => (
             <Datepicker
              value={field.value}
              onSelectedDateChanged={(date) => field.onChange(date)}
              dateFormat="yyyy-MM-dd"
              className="border rounded px-4 py-2 w-full" />
            )}
          /> 

for regular use you can use useState,and update the date using this.

  const handleDatePickerChange = (date) => {
    setSelectedDate(date);
    console.log(date);
  };

<Datepicker name="selectedDate" value={selectedDate}
            onSelectedDateChanged={handleDatePickerChange} /> 

Sulfanilamide

Answer 3

Little late but maybe you'll need it.

const handleDateChange = (date: Date) => {
   console.log(date);
};

<Datepicker id="date" onSelectedDateChanged={handleDateChange}/>
            

Should work.

Helvetii

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Biysk