react-native-paper-dates icon indicating copy to clipboard operation
react-native-paper-dates copied to clipboard

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

Open Izocel opened this issue 6 months ago • 4 comments

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)

image

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

Izocel avatar Aug 08 '24 12:08 Izocel