Fix default datetime widget format (#7386)

* fix: fixed default format to handle utc properly

* feat: added test for default format on datetime widget

* feat: linter passed

---------

Co-authored-by: Anze Demsar <anze.demsar@p-m.si>
Co-authored-by: Martin Jagodic <jagodicmartin1@gmail.com>

Author: 3 people

packages/decap-cms-widget-datetime/src/DateTimeControl.js

@@ -85,7 +85,7 @@ class DateTimeControl extends React.Component {
     const { field } = this.props;
     let inputType = 'datetime-local';
     let inputFormat = 'YYYY-MM-DDTHH:mm';
-    let format = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]';
+    let format = `YYYY-MM-DDTHH:mm:ss.SSS${this.isUtc ? '[Z]' : 'Z'}`;
     let userFormat = field?.get('format');
     let dateFormat = field?.get('date_format');
     let timeFormat = field?.get('time_format');

packages/decap-cms-widget-datetime/src/__tests__/DateTimeControl.spec.js

@@ -35,8 +35,16 @@ function setup(propsOverrides = {}) {
 }
 
 describe('DateTimeControl', () => {
+  const mockDate = '2025-01-01T12:00:00.000Z';
+
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date(mockDate));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
   });
 
   test('renders the component with input, now button, and clear button', () => {
@@ -57,4 +65,26 @@ describe('DateTimeControl', () => {
     fireEvent.click(clearButton);
     expect(props.onChange).toHaveBeenCalledWith('');
   });
+
+  test('sets value in custom format (local timezone) when input value changes', () => {
+    const { input, props } = setup({ field: new Map() });
+
+    const testDate = '2024-03-15T10:30:00';
+
+    fireEvent.change(input, { target: { value: testDate } });
+
+    const expectedValue = dayjs(testDate).format('YYYY-MM-DDTHH:mm:ss.SSSZ');
+    expect(props.onChange).toHaveBeenCalledWith(expectedValue);
+  });
+
+  test('sets value in custom format (UTC) when input value changes', () => {
+    const { input, props } = setup({ field: new Map([['picker_utc', true]]) });
+
+    const testDate = '2024-03-15T10:30:00';
+
+    fireEvent.change(input, { target: { value: testDate } });
+
+    const expectedValue = dayjs(testDate).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
+    expect(props.onChange).toHaveBeenCalledWith(expectedValue);
+  });
 });