0

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

Sandesh Rathnayake
  • 13
  • 1
  • 4

2 Answers2

2

@Sandesh Rathnayake,

This control has exposed a property to set its value:

enter image description here

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 }) } 
        />
Baker_Kong
  • 1,739
  • 1
  • 4
  • 9
  • This just doesn't work for me. Made it identical and still shows 1970 as default. – NightTom Feb 08 '21 at 18:50
  • "Value" in the DatePicker control is where you set the initial value (aka what you get from SharePoint). so replace "value: new Date()" with "value: [date object from SharePoint]" – Peter Mendez Mar 03 '21 at 18:22
0

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 }) } 
        />
Eiglimar Junior
  • 51
  • 1
  • 8