I want to know how to set date value into a Fluent UI datepicker sharepoint spfx react

Question

In here i want to get a date from the SharePoint list and set it in the datepicker,

enter image description here

FYI the date is coming properly from the API , i am using pnp js to retrieve data, but only the date value is not setting into the datepicker

Answer 1

@Sandesh Rathnayake,

This control has exposed a property to set its value:

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

You can define a Date varible in the state of react componment then set its value as below:

export class DatePickerBasicExample extends React.Component<any, IDatePickerBasicExampleState> { 
  constructor() { 
    super(); 

    this.state = { 
      firstDayOfWeek: DayOfWeek.Sunday, 
      value: new Date()
    }; 
  } 

....

 <DatePicker 
          label='Start date' 
          isRequired={ false } 
          allowTextInput={ true } 
          ariaLabel={ desc } 
          firstDayOfWeek={ this.state.firstDayOfWeek } 
          strings={ DayPickerStrings } 
          value={ this.state.value } 
          onSelectDate={ date => this.setState({ value: date }) } 
        /> 

Answer 2

You could use the "minDate" attr of the datepicker.

<DatePicker 
          label='Start date' 
          isRequired={ false } 
          allowTextInput={ true } 
          ariaLabel={ desc } 
          firstDayOfWeek={ this.state.firstDayOfWeek } 
          strings={ DayPickerStrings }
          minDate={new Date()}
          value={ this.state.value } 
          onSelectDate={ date => this.setState({ value: date }) } 
        />