Calendar 'modal' as overlapping components (when yearsDiff >= 100y.)

[Izocel]

trafficstars

Current behavior

ANDROID && IOS Using Single-Date mode in the calendar, if the picker date is 100 year under 'current-year' we get weird components overlapping.

Expected behavior

All dates should works properly.

How to reproduce?

// Top component return
    return <DatePickerInput
      mode="flat"
      label={label}
      inputMode="start"
      locale={pickerLocale}
      ref={datePickerInputRef}

      value={outputDate}
      {...validationProps}

      disabled={disabled}
      editable={!disabled && editable}
      withModal={!disabled && editable}
      saveLabelDisabled={disabled || !editable}
      inputEnabled={!disabled && editable && inputEnabled}
      withDateFormatInLabel={withDateFormatInLabel ?? false}
      placeholder={placeholder ?? translate("baseDisplayFields.date")}

      cursorColor={null}
      selectionColor={null}
      textColor={colors.black}
      outlineColor="transparent"
      underlineColor="transparent"
      activeOutlineColor="transparent"
      activeUnderlineColor="transparent"
      placeholderTextColor={colors.dimmed}

      iconStyle={styleIcon}
      iconSize={styleIcon.iconSize}
      iconColor={styleIcon.iconColor}
      style={[DatePickerStyles.defaultInput, style]}
      underlineStyle={[DatePickerStyles.defaultInputFlat, flatStyle]}
      contentStyle={[DatePickerStyles.defaultInputContent, contentStyle]}
      outlineStyle={[DatePickerStyles.defaultInputOutlined, outLineStyle]}

      onChange={onInputChange}
      onChangeText={onChangeText}
      onValidationError={onInvalidDate}
    />

//Wrapped component:
export function DatePickerForInlineInput(value, styles, onChange) {
  value = value ? tryParseDateValue(moment(value).toDate()) : null;
  styles = {
    style: [DatePickerStyles.defaultInlineInputStyle, styles.style],
    inputContainerStyle: [DatePickerStyles.defaultInlineInputContainerStyle, styles.inputContainerStyle]
  }

  return <DatePicker
    placeholder={""}
    dateValue={value}
    style={styles.style}
    inputContainerStyle={styles.inputContainerStyle}
    onChange={(date) => {
      const textDate = date ? moment(date).format("YYYY-MM-DD") : "";
      onChange(textDate);
    }}
  />;
}

//Call to wrapped component:
return DatePickerForInlineInput(value, pickerStyle, (newValue) => {
  this.setColumnValue(index, key, newValue);
});

Preview

1901-01-01 <> 1923-01-01 (1925-01-01 is OK)

What have you tried so far?

• Evaluate if it was related to the device OS. (no)
• Evaluate if this was only in dev/prod build (affects both)

Your Environment

software	version
IOS	17.x
android	14.x
react-native	0.73.x
react-native-paper	latest

[iM-GeeKy]

PRs are welcome!

[Izocel]

Do you have a clue about what's going on here ?

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can, to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (link to snack.expo.dev) or a repo on GitHub, and the information about your environment (such as the platform of the device, versions of all the packages etc.).

[yoshitaka-sato]

I have the same issue.

I think the following is the cause, but I don't know how to fix it.

https://github.com/web-ridge/react-native-paper-dates/blob/master/src/Date/Month.tsx#L461 https://github.com/web-ridge/react-native-paper-dates/blob/master/src/Date/dateUtils.tsx#L173

Modifying the startAtIndex to 2688 ((2024 - 1800) * 12) seems to be fine.

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[MartinHarkins]

Hey, we're experiencing this issue as well on iOS:

<DatePickerInput
                      locale="fr"
                      label={t('patient.birthInformation.birthDate')}
                      value={value}
                      onChange={(d) => onChange(d)}
                      inputMode="start"
                      mode="outlined"
                      theme={theme}
                      validRange={{ endDate: new Date() }}
                      saveLabel={t('common.save')}
                      presentationStyle="pageSheet"
                      endYear={new Date().getFullYear()}
                      startYear={1900}
                      withDateFormatInLabel={false}
                      testID="patient.birthDate"
                    />

To reproduce simply select year 1920 for example.

[beliven-davide-lorigliola]

The issue is still present