CODEWITHSUNDEEP
javascriptreactjsdatepicker
El-Cortez
El-Cortez

Reputation: 123

How to auto open react DatePicker

I have the following code

      case 'date':
    if (Modernizr.touchevents && Modernizr.inputtypes && Modernizr.inputtypes.date) {
      element = (
        <input
          type='date'
          id={this.props.id}
          name={this.props.name}
          onChange={arg => this.changeValue(moment(arg && arg.currentTarget ? arg.currentTarget.value : arg))}
          onBlur={arg => this.blurValue(moment(arg && arg.currentTarget ? arg.currentTarget.value : arg))}
          value={this.getValue() ? moment(this.getValue()).format('YYYY-MM-DD') : moment(this.props.minDate).format('YYYY-MM-DD')}
          tabIndex={this.props.tabIndex}
          min={this.props.minDate || null}
          max={this.props.maxDate || null}
        />
      );
    } else {
      element = (
        <DatePicker
          {...this.props}
          name={this.props.name}
          onChange={this.changeValue}
          selected={this.getValue() || this.props.selected}
          startDate={this.props.startDate || null}
          endDate={this.props.endDate || null}
          minDate={this.props.minDate || null}
          tabIndex={this.props.tabIndex}
          placeholderText={this.props.placeholder}
          ref={this.props.elRef}
          disabled={this.props.disabled}
          showYearDropdown={this.props.showYearDropdown}
          locale={this.lang}
        />
      );
    }
    break;
}

This loads a react date picker on my landing page.

Since it's been used a lot, I'd like to make it more user-friendly by auto opening the datepicker when the page loads. I've been searching a lot but I have not found an easy, direct approach to this.

I found this topic (https://github.com/Hacker0x01/react-datepicker/issues/276) but since I'm a bit new to Javascript and React, I need a bit more explanations on how to implement this code in mine, so it would be awesome if anyone could explain to me where exactly I should put my code to implement this function

Thanks a lot everyone !

Upvotes: 1

Views: 7347

Answers (3)

Sulman Azhar
Sulman Azhar

Reputation: 1079

I believe the open prop can help anyone. I tried using autoFocus but it didn't work but open prop did

https://github.com/Hacker0x01/react-datepicker/issues/1179#issuecomment-694880947

Upvotes: 1

El-Cortez
El-Cortez

Reputation: 123

I finally found the answer to my problem. The react-datepicker version I had was 0.29.0 Moving it to 0.30.0 (by changing the log in the package.json and running npm install) allowed me to use the new prop autoFocus directly in the datepicker

Here is the code for the 0.30.0 release https://github.com/Hacker0x01/react-datepicker/releases/tag/v0.30.0

Thanks everyone for your help :)

Upvotes: 1

jogoe
jogoe

Reputation: 324

Have you tried adding the autofocus property, since the DatePicker opens OnFocus

<input type="text" name="inputname" autofocus>

should work :)

for your code:

 element = (
    <input
      type='date'
      id={this.props.id}
      name={this.props.name}
      onChange={arg => this.changeValue(moment(arg && arg.currentTarget ? arg.currentTarget.value : arg))}
      onBlur={arg => this.blurValue(moment(arg && arg.currentTarget ? arg.currentTarget.value : arg))}
      value={this.getValue() ? moment(this.getValue()).format('YYYY-MM-DD') : moment(this.props.minDate).format('YYYY-MM-DD')}
      tabIndex={this.props.tabIndex}
      min={this.props.minDate || null}
      max={this.props.maxDate || null}
      autofocus
    />
  );

Upvotes: 1

Related Questions