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

The user interface design transforms as a PDF file is being generated through html2pdf

Developing a specialized command-line application for currency conversion is my current project

Utilizing the input element to modify the font color of the title upon clicking the button

Guide to specifying an explicit return type annotation for a recursive closure with JSDoc

Guide to integrating google-map-react with Next.js

Encountering a CORS error while attempting to initiate a Github API call on my Next App

Navigating the world of Typescript: mastering union types and handling diverse attributes

The configuration of the leaflet in Nextjs seems to be malfunctioning

Encountering errors 'LeftSegment' not found and 'infer' not found within the react-router directory in the node_modules folder

What is the best way to include multiple targets/executables within a single Node.js repository?

react-vimeo not firing onPause and onPlay events

Versatile typing capabilities

Building a custom Angular 6 pipe for generating a summary of a text snippet

Angular Notification not visible

Learn how to manipulate Lit-Element TypeScript property decorators by extracting values from index.html custom elements

Getting the Class name in Typescript

Value of the environmental variable not being interpreted

What is the best way to show a video on autoplay with no controls in NextJS 14?

What is the method for obtaining a dynamic route path within the pages directory in Next.js?

What is the best way to bring in a service as a singleton class using System.js?