diff --git a/package-lock.json b/package-lock.json
index b798a3f603..f014a6b680 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13955,9 +13955,9 @@
       }
     },
     "superdesk-ui-framework": {
-      "version": "3.1.28",
-      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.1.28.tgz",
-      "integrity": "sha512-H/DE7gcJviHE5jR2vhuiTB2WLUxmpFstomFoEHWE5zGDqkcqGyPZUwRrwDTvtZLnMuMZXj1czeShbhJr9AxMhg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-4.0.3.tgz",
+      "integrity": "sha512-LUNR1u3sK4Ayiq74hXZ5fqp7k9OK/MJogsEXJfeaJQyBWzRdbzwyYjljIXh7gJJExtDEBokLxU33IpjuXuITJA==",
       "requires": {
         "@popperjs/core": "^2.4.0",
         "@superdesk/common": "0.0.28",
diff --git a/package.json b/package.json
index 4ec785dce4..6c58edf92a 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.1.28",
+    "superdesk-ui-framework": "^4.0.3",
     "ts-loader": "3.5.0",
     "typescript": "4.9.5",
     "uuid": "8.3.1",
diff --git a/scripts/apps/authoring-react/fields/datetime/difference.tsx b/scripts/apps/authoring-react/fields/datetime/difference.tsx
new file mode 100644
index 0000000000..faf04e5034
--- /dev/null
+++ b/scripts/apps/authoring-react/fields/datetime/difference.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {IDateTimeFieldConfig, IDateTimeValueOperational, IDifferenceComponentProps} from 'superdesk-api';
+import {DifferenceGeneric} from '../difference-generic';
+
+type IProps = IDifferenceComponentProps<IDateTimeValueOperational, IDateTimeFieldConfig>;
+
+export class Difference extends React.PureComponent<IProps> {
+    render() {
+        const {value1, value2} = this.props;
+
+        return (
+            <DifferenceGeneric
+                items1={value1 == null ? [] : [value1]}
+                items2={value2 == null ? [] : [value2]}
+                getId={(item) => item}
+                template={({item}) => <span>{item}</span>}
+            />
+        );
+    }
+}
diff --git a/scripts/apps/authoring-react/fields/datetime/editor.tsx b/scripts/apps/authoring-react/fields/datetime/editor.tsx
new file mode 100644
index 0000000000..471288442c
--- /dev/null
+++ b/scripts/apps/authoring-react/fields/datetime/editor.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import {DateTimePicker} from 'superdesk-ui-framework/react';
+import {
+    IEditorComponentProps,
+    IDateTimeFieldConfig,
+    IDateTimeValueOperational,
+    IDateTimeUserPreferences,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+import {appConfig} from 'appConfig';
+
+type IProps = IEditorComponentProps<IDateTimeValueOperational, IDateTimeFieldConfig, IDateTimeUserPreferences>;
+
+export class Editor extends React.PureComponent<IProps> {
+    render() {
+        const Container = this.props.container;
+
+        return (
+            <Container>
+                <DateTimePicker
+                    dateFormat={appConfig.view.dateformat}
+                    label={gettext("Date time (AUTHORING-REACT)")}
+                    onChange={(value) => {
+                        this.props.onChange(value);
+                    }}
+                    value={(() => {
+                        const {value} = this.props;
+                        const parsedVal = value != null && (value.length > 0) ? new Date(value) : null;
+
+                        return parsedVal;
+                    })()}
+                    disabled={this.props.config.readOnly}
+                    width={this.props.config.width}
+                />
+            </Container>
+        );
+    }
+}
diff --git a/scripts/apps/authoring-react/fields/datetime/index.tsx b/scripts/apps/authoring-react/fields/datetime/index.tsx
new file mode 100644
index 0000000000..1e2fdf9fb5
--- /dev/null
+++ b/scripts/apps/authoring-react/fields/datetime/index.tsx
@@ -0,0 +1,37 @@
+import {
+    ICustomFieldType,
+    IDateTimeValueOperational,
+    IDateTimeValueStorage,
+    IDateTimeFieldConfig,
+    IDateTimeUserPreferences,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+import {Editor} from './editor';
+import {Preview} from './preview';
+import {Difference} from './difference';
+
+export const DATETIME_FIELD_ID = 'datetime';
+
+export function getDatetimeField()
+: ICustomFieldType<IDateTimeValueOperational, IDateTimeValueStorage, IDateTimeFieldConfig, IDateTimeUserPreferences> {
+    const field: ICustomFieldType<
+        IDateTimeValueOperational,
+        IDateTimeValueStorage,
+        IDateTimeFieldConfig,
+        IDateTimeUserPreferences
+    > = {
+        id: DATETIME_FIELD_ID,
+        label: gettext('Datetime (authoring-react)'),
+        editorComponent: Editor,
+        previewComponent: Preview,
+        generic: true,
+
+        hasValue: (valueOperational) => valueOperational != null,
+        getEmptyValue: () => null,
+
+        differenceComponent: Difference,
+        configComponent: null,
+    };
+
+    return field;
+}
diff --git a/scripts/apps/authoring-react/fields/datetime/preview.tsx b/scripts/apps/authoring-react/fields/datetime/preview.tsx
new file mode 100644
index 0000000000..787396b204
--- /dev/null
+++ b/scripts/apps/authoring-react/fields/datetime/preview.tsx
@@ -0,0 +1,28 @@
+import {gettext} from 'core/utils';
+import {noop} from 'lodash';
+import React from 'react';
+import {IDateTimeFieldConfig, IDateTimeValueOperational, IPreviewComponentProps} from 'superdesk-api';
+import {DateTimePicker} from 'superdesk-ui-framework/react';
+
+type IProps = IPreviewComponentProps<IDateTimeValueOperational, IDateTimeFieldConfig>;
+
+export class Preview extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <DateTimePicker
+                dateFormat='MM/DD/YYYY'
+                label={gettext("Date time (AUTHORING-REACT)")}
+                onChange={noop}
+                preview={true}
+                value={(() => {
+                    const {value} = this.props;
+                    const parsedVal = value != null && (value.length > 0) ? new Date(value) : null;
+
+                    return parsedVal;
+                })()}
+                disabled={this.props.config.readOnly}
+                width={this.props.config.width}
+            />
+        );
+    }
+}
diff --git a/scripts/apps/authoring-react/fields/register-fields.ts b/scripts/apps/authoring-react/fields/register-fields.ts
index f379ea7166..21db376c69 100644
--- a/scripts/apps/authoring-react/fields/register-fields.ts
+++ b/scripts/apps/authoring-react/fields/register-fields.ts
@@ -16,6 +16,7 @@ import {geDurationField} from './duration';
 import {getArticlesInPackageField} from './package-items';
 import {getTagInputField} from './tag-input';
 import {getDatelineField} from './dateline';
+import {getDatetimeField} from './datetime';
 
 export const AUTHORING_REACT_FIELDS = 'authoring-react--fields';
 
@@ -45,6 +46,7 @@ export function registerAuthoringReactFields() {
                 getEditor3Field(),
                 getDropdownField(),
                 getDateField(),
+                getDatetimeField(),
                 getTimeField(),
                 geDurationField(),
                 getUrlsField(),
diff --git a/scripts/core/superdesk-api.d.ts b/scripts/core/superdesk-api.d.ts
index 1a1f51d96e..eccc527393 100644
--- a/scripts/core/superdesk-api.d.ts
+++ b/scripts/core/superdesk-api.d.ts
@@ -315,6 +315,15 @@ declare module 'superdesk-api' {
     };
     export type ITimeUserPreferences = never;
 
+    // AUTHORING-REACT FIELD TYPES - datetime
+
+    export type IDateTimeValueOperational = string; // ISO 8601, 13:59:01.123
+    export type IDateTimeValueStorage = IDateTimeValueOperational;
+    export interface IDateTimeFieldConfig extends ICommonFieldConfig {
+        allowSeconds?: boolean;
+    };
+    export type IDateTimeUserPreferences = never;
+
     // AUTHORING-REACT FIELD TYPES - tag input
 
     export type ITagInputValueOperational = Array<string> | null;