diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx index 25e5ce5a1..ea80389f6 100644 --- a/web/pgadmin/static/js/components/FormComponents.jsx +++ b/web/pgadmin/static/js/components/FormComponents.jsx @@ -354,7 +354,8 @@ export function InputDateTimePicker({ value, onChange, readonly, controlProps, e format: format.replace('xxx', timeZoneString), label: '', variant: 'inline', - ampm: controlProps.ampm ? controlProps.ampm : undefined, + // DatePicker has no clock and passes unknown props through to the DOM. + ampm: controlProps?.pickerType === 'Date' ? undefined : controlProps.ampm, disablePast: controlProps.disablePast || false, onChange: handleChange, slotProps: {textField: {placeholder:placeholder, error: error}} diff --git a/web/regression/javascript/components/InputDateTimePicker.spec.js b/web/regression/javascript/components/InputDateTimePicker.spec.js new file mode 100644 index 000000000..26cd28e68 --- /dev/null +++ b/web/regression/javascript/components/InputDateTimePicker.spec.js @@ -0,0 +1,48 @@ +///////////////////////////////////////////////////////////// +// +// pgAdmin 4 - PostgreSQL Tools +// +// Copyright (C) 2013 - 2026, The pgAdmin Development Team +// This software is released under the PostgreSQL Licence +// +////////////////////////////////////////////////////////////// + +import {render} from '@testing-library/react'; +import {DatePicker, DateTimePicker, TimePicker} from '@mui/x-date-pickers'; +import {InputDateTimePicker} from '../../../pgadmin/static/js/components/FormComponents'; + +jest.mock('@mui/x-date-pickers', () => ({ + DatePicker: jest.fn(() => null), + DateTimePicker: jest.fn(() => null), + TimePicker: jest.fn(() => null), +})); + +describe('InputDateTimePicker clock mode', () => { + beforeEach(() => jest.clearAllMocks()); + + const renderPicker = (pickerType, ampm) => { + const controlProps = {pickerType}; + if (ampm !== undefined) { + controlProps.ampm = ampm; + } + render(); + }; + + it.each([false, true, undefined])('does not pass ampm=%s to the Date picker', (ampm) => { + renderPicker('Date', ampm); + expect(DatePicker).toHaveBeenCalled(); + expect(DatePicker.mock.calls[0][0].ampm).toBeUndefined(); + }); + + describe.each([ + ['Time', TimePicker], + ['DateTime', DateTimePicker], + ])('%s picker', (pickerType, Picker) => { + it.each([false, true, undefined])('forwards ampm=%s unchanged', (ampm) => { + renderPicker(pickerType, ampm); + expect(Picker).toHaveBeenCalled(); + expect(Picker.mock.calls[0][0].ampm).toBe(ampm); + }); + }); +});