0

I have added DatePicker to my SPFX web part.I wanted to get selected date from DatePicker control. Find the following code to get date:

import {DatePicker} from 'office-ui-fabric-react';

<DatePicker  className="form-control" id="duedate" value={this.state.DueDate} onChange={(event) => this.handleDateChange(event)} selected={this.state.DueDate}/>

I get following error because selected property does not exist.

Type '{ className: string; id: string; placeholder: string; value: Date; onChange: (event: FormEvent) => void; selected: Date; }' is not assignable to type 'IntrinsicAttributes & IDatePickerProps & { children?: ReactNode; }'. Property 'selected' does not exist on type 'IntrinsicAttributes & IDatePickerProps & { children?: ReactNode; }'.

Appreciate your thoughts on how to fix this issue.

1

You are getting this error because selected property does not exist on DatePicker control.

To check the available properties, refer to this URL.

If you are adding this control on a Editform and need to have a date prepopulated , you can add your logic in value property as below :

<DatePicker  className="form-control" id="duedate" value={this.state.DueDate !== null && this.state.DueDate} onChange={(event) => this.handleDateChange(event)}/>
| improve this answer | |
1

You could try to use onSelectDate property:
My test code:

<DatePicker
              className={controlClass.control}
              label="Start date"
              isRequired={false}
              allowTextInput={true}
              ariaLabel={desc}
              firstDayOfWeek={firstDayOfWeek}
              strings={DayPickerStrings}
    
              onSelectDate={onSelectDate}
            />
const onSelectDate = (date: Date | null | undefined): void => {
      console.log(date)      
    };

Test result: enter image description here

You could get all properties which we could use here:

https://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.