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();