AnsweredAssumed Answered

ExB DatePicker component - incorrect value from onChange event

Question asked by mvrticharcdata-cz-esridist Employee on Jun 9, 2020
Latest reply on Jun 11, 2020 by dmartinez-esristaff

Hi,

 

The "jimu-ui/date-picker" component returns incorrect value to onChange event handler.

Maybe its related to locale, as I use "cs" (Czech) locale in my environment.

The value returned is 1 month plus the date selected from the calendar UI.

 

It seems the "jimu-ui/date-picker" is just a wrapper around the "react-datepicker" component to give it UI/UX consistency with other ExB components.

If this is true, then the "jimu-ui/date-picker" should have the same API as the "react-datepicker", but it has not (selected vs startDate prop, different value from onChange event, and more).

Here is an example of both components:

<FormGroup>
  <Label>React Date Picker</Label>
  <ReactDatePicker
    locale="cs"
    dateFormat="d. M. yyyy"
    selected={this.state.date}
    onChange={(date) => {
      this.setState({ date });
    }}
  />
</FormGroup>
<FormGroup>
  <Label>ExB Date Picker</Label>
  <DatePicker
    startDate={this.state.date}
    onChange={(value) => {
      this.setState({ date: new Date(value) });
    }}
  />
</FormGroup>

Both components render the date correctly. However, only the React DatePicker returns correct date from the onChange event.

ExB DatePicker returns a number as value from the onChange event, and this is 1 month plus the date selected from the calendar.

React DatePicker returns a date as value from the onChange event and the date is correct.

 

It would be nice to have more documentation for the Jimu UI components in the ExB SDK (examples of usage and overall API of components). I am aware of the Theme Builder page (Theme Builder), but its not sufficient to use as the reference. 

 

Thanks,

Matej

Outcomes