CODEWITHSUNDEEP
reactjsfluent-ui
Birtija
Birtija

Reputation: 117

Office Fluent UI / DatePicker - onSelectDate does not send event as parameter

I use the Datapicker component: https://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker

In one form i use multiple DatePicker components like startDate, endDate, etc.

I call the DatePicker components like this:

 <DatePicker
            label="Start date"
            id="dateFrom"
            name="dateFrom"
            onSelectDate={props.onChangeDatePicker}
            value={new Date(props.entity.datumFrom)}
          />

The documentation says that onSelectData callback function only gives a selected date as a parameter.

onSelectDate - (date: Date | null | undefined) => void

There is not event returned that would help me know which of the following datepickers was selected.

This functionality exists for example on the TextField component that has the method onChange:

onChange- (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void

When i have the event i can call event.target.name and event.target.value to get the needed info.

Is there a way to get the event, or some other object so i can know which datepicker component was called?

Upvotes: 2

Views: 6565

Answers (1)

rahul kumar
rahul kumar

Reputation: 11

try this:

  handleDateSelection = (e) => {
    console.log(e)
}

<DatePicker
        label="Start date"
        id="dateFrom"
        name="dateFrom"
        onSelectDate={this.handleDateSelection}
        value={new Date(props.entity.datumFrom)}
      />

console

Upvotes: 0

Related Questions