react-native-paper-dates
react-native-paper-dates copied to clipboard
Calendar 'modal' as overlapping components (when yearsDiff >= 100y.)
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 |