How to provide focus to a DatePicker component so that when I render it, the calendar pop up is shown ?

[Aravind Rajagopal]

Hi,

I have a DatePicker component in my code in a dialog box. I want the calendar pop-up to be opened by default when I render this component. 

How can we achieve this ?

<Controller

                  render={({ field }) => (

                    <DatePickerComponent {...field}

                      ref={refForecastDtInterfacePoint}

                      openOnFocus={true}

                      cssClass="e-custom-style"

                      placeholder="Select a date"

                      format={selectedProject.dateFormat}

                      min={new Date()}

                    />

                  )}

                  name="forecastDate"

                  rules={{ required: true }}

                  control={control}

                />

[Sureshkumar P]

Hi Aravind,

We suggest you call the show method inside the component create event to show the popup after rendering the component.

Find the code example here:

export class Default extends SampleBase {

  datepickerInstance;

  dateValue = new Date();

  componentCreate() {

    this.datepickerInstance.show();

  }

  render() {

    return (

      <div className="control-pane">

        <div className="control-section">

          <div className="datepicker-control-section">

            <DatePickerComponent

              ref={(calendar) => (this.datepickerInstance = calendar)}

              value={this.dateValue}

              created={this.componentCreate.bind(this)}

            ></DatePickerComponent>

          </div>

        </div>

      </div>

    );

  }

}

 

Find the sample here: https://stackblitz.com/edit/react-rtb7ht?file=index.js

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P