SPFX DatePicker - Property 'selected' does not exist

Question

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.

Answer 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)}/>

Answer 2

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:

You could get all properties which we could use here:

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