diff --git a/src/components/Input/DateInput.d.ts b/src/components/Input/DateInput.d.ts index 2dac7c8c..77da8a03 100644 --- a/src/components/Input/DateInput.d.ts +++ b/src/components/Input/DateInput.d.ts @@ -24,6 +24,7 @@ interface DateInputPropTypes dateVisible?: (currentDate: Date) => any[]; dateFormat?: string; defaultValue?: DateOrString; + initialCalendarDate?: DateOrString; direction?: Direction; disabled?: boolean; footer?: React.ReactNode; diff --git a/src/components/Input/DateInput.js b/src/components/Input/DateInput.js index 597b0635..db5ac70e 100644 --- a/src/components/Input/DateInput.js +++ b/src/components/Input/DateInput.js @@ -62,6 +62,7 @@ export default class DateInput extends React.Component { dateVisible: PropTypes.func, dateFormat: PropTypes.string, defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + initialCalendarDate: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), direction: PropTypes.string, disabled: PropTypes.bool, footer: deprecated(PropTypes.node, 'Use renderFooter instead.'), @@ -197,12 +198,15 @@ export default class DateInput extends React.Component { return this.state.value; }; - getCurrentDate = () => - parseValue( - this.props.value !== undefined ? this.props.value : this.state.value, - this.props.dateFormat, - this.props.parse - ); + getCurrentDate = () => { + // If value prop is provided and not empty, use it + // Otherwise, use state.value if available, or fall back to initialCalendarDate + const valueToUse = + this.props.value !== undefined && this.props.value !== '' + ? this.props.value + : this.state.value || this.props.initialCalendarDate || ''; + return parseValue(valueToUse, this.props.dateFormat, this.props.parse); + }; parseInput = (value) => { const date = this.props.parse(value, this.props.dateFormat); diff --git a/src/components/Input/DateInput.spec.js b/src/components/Input/DateInput.spec.js index ab4c1dee..7ee4c9c2 100644 --- a/src/components/Input/DateInput.spec.js +++ b/src/components/Input/DateInput.spec.js @@ -46,6 +46,45 @@ describe('', () => { }); }); + describe('initialCalendarDate', () => { + it('should open calendar to initialCalendarDate when value is empty', () => { + const initialDate = new Date(2026, 2, 1); // March 1, 2026 + const component = mount(); + const input = component.find('input'); + + assert.equal(input.getDOMNode().value, ''); + assert(isSameDay(component.instance().getCurrentDate(), initialDate)); + }); + + it('should use value over initialCalendarDate when both are provided', () => { + const value = new Date(2025, 10, 15); // November 15, 2025 + const initialDate = new Date(2026, 2, 1); // March 1, 2026 + const component = mount(); + + assert(isSameDay(component.instance().getCurrentDate(), value)); + }); + + it('should use state.value over initialCalendarDate when state has value', () => { + const initialDate = new Date(2026, 2, 1); // March 1, 2026 + const component = mount(); + const input = component.find('input'); + + // Set state value by typing + input.simulate('change', { target: { value: '11/15/2025' } }); + component.update(); + + const stateValueDate = new Date(2025, 10, 15); // November 15, 2025 + assert(isSameDay(component.instance().getCurrentDate(), stateValueDate)); + }); + + it('should format initialCalendarDate string prop', () => { + const component = mount(); + + const expectedDate = new Date(2026, 2, 1); // March 1, 2026 + assert(isSameDay(component.instance().getCurrentDate(), expectedDate)); + }); + }); + it('should not tab to the calendar button', () => { const component = mount();