Unable to retrieve selected value from Flowbite-React Datepicker due to malfunctioning props change event

Question

Unable to retrieve selected value from Flowbite-React Datepicker due to malfunctioning props change event

I am encountering an issue with extracting the selected value from the Datepicker component in the flowbite-react library while using it with NextJS.
The component is being displayed correctly.
I attempted the code below, but it does not return anything when a date is chosen:

import { Datepicker } from "flowbite-react";

export default function ExampleComp(){
 return (
   <Datepicker
       onChange={(e) => console.log(e)} // not functioning
       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'
      />
  )
}

There isn't a specific use case mentioned in the official documentation page, but in the storybook, the prop onSelectedDateChanged exists. I have implemented it, however, I'm encountering the error:

Error: Does not exist on type 'IntrinsicAttributes & DatepickerProps'

.
Your assistance would be greatly appreciated.

Version

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

typescript next.js tailwind-css react-props flowbite

Answer 1

Answer №1

After implementing onSelectedDateChanged and passing a function to the props, I successfully obtained the desired output by utilizing it with react hooks 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" />
            )}
          />

To use it regularly, you can employ useState to update the date in this manner:


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

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

Answer 2

After implementing onSelectedDateChanged and passing a function to the props, I successfully obtained the desired output by utilizing it with react hooks 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" />
            )}
          />

To use it regularly, you can employ useState to update the date in this manner:


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

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

Answer 3

Answer №2

Sorry for the delay, but this might come in handy.

function updateSelectedDate(date) {
   console.log(date);
};

<DatePicker id="selectedDate" onDateChange={updateSelectedDate}/>

This should do the trick.

Answer 4

Sorry for the delay, but this might come in handy.

function updateSelectedDate(date) {
   console.log(date);
};

<DatePicker id="selectedDate" onDateChange={updateSelectedDate}/>

This should do the trick.

Answer 5

Answer №3

function updateSelectedDate(date) {
    console.log("Selected date: " + date);
}
<DatePicker onDateSelect={updateSelectedDate}/>

Answer 6

function updateSelectedDate(date) {
    console.log("Selected date: " + date);
}
<DatePicker onDateSelect={updateSelectedDate}/>

Unable to retrieve selected value from Flowbite-React Datepicker due to malfunctioning props change event

Answer №1

Answer №2

Answer №3

Similar questions

What is the best approach to defining a type for a subclass (such as React.Component) in typescript?

In a production environment, Nextjs lacks minification

Issue with Typescript Application not navigating into the node_modules directory

Utilizing PrimeNG's p-dataView feature without repetitive FieldSets

Is there a way to incorporate personalized image placeholders into Next.js?

How can I inform Typescript that an interface will exclusively consist of defined members?

Issue with Material UI causing slow compilation in Next.js version 13

What advantages does using an RxJS Subject have over handling multiple event listeners individually in terms of speed

Converting an integer into a String Enum in TypeScript can result in an undefined value being returned

Creating adaptable rows and columns with Angular Material's data table feature

How can we update the form builder or form group in Angular 2 when making changes to the existing data in a table? I'm a bit confused on how to implement router

Error: Unable to access 'clientModules' property as it is undefined

The access to the HTTP response object is not possible: the property is not found on the Object type

Deploy NextJs on an IIS server

JavaScript functions are not being triggered when the submit button is clicked

ngOnChanges will not be triggered if a property is set directly

There seems to be an issue with my React application that was built using Webpack 5 and compiled with TypeScript. The @tailwind directive is not functioning properly in the browser, and

Error: Unable to locate module: Could not find 'react-server-dom-webpack/client.edge'

Encountered an error while trying to load next.config.js - Specifically, a TypeError: The options

Zero-length in Nightmare.js screenshot buffer: an eerie sight