diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx
index b70f621e73..826add1f31 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx
@@ -21,6 +21,10 @@ const StyledWrapper = styled('div')(({ theme }) => ({
     gap: theme.spacing(1),
 }));
 
+/**
+ * @deprecated use `component/feature/FeatureStrategy/FeatureStrategyConstraints/ConstraintDateInput.tsx`
+ * Remove with flag `addEditStrategy`
+ */
 export const DateSingleValue = ({
     setValue,
     value,
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesPopover.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesPopover.tsx
index c51c997b54..51a21e1ce4 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesPopover.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/AddValuesPopover.tsx
@@ -22,12 +22,6 @@ const InputRow = styled('div')(({ theme }) => ({
     width: '100%',
 }));
 
-const ErrorMessage = styled('div')(({ theme }) => ({
-    color: theme.palette.error.main,
-    fontSize: theme.typography.caption.fontSize,
-    marginBottom: theme.spacing(1),
-}));
-
 export type OnAddActions = {
     setError: (error: string) => void;
     clearInput: () => void;
@@ -93,7 +87,6 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
                     }
                 }}
             >
-                {error && <ErrorMessage>{error}</ErrorMessage>}
                 <InputRow>
                     <ScreenReaderOnly>
                         <label htmlFor={inputId}>Constraint Value</label>
@@ -111,6 +104,8 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
                         fullWidth
                         inputRef={inputRef}
                         autoFocus
+                        error={!!error}
+                        helperText={error}
                     />
                     <Button
                         variant='text'
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ConstraintDateInput.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ConstraintDateInput.tsx
new file mode 100644
index 0000000000..d9bb930718
--- /dev/null
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ConstraintDateInput.tsx
@@ -0,0 +1,95 @@
+import Input from 'component/common/Input/Input';
+import { parseDateValue, parseValidDate } from 'component/common/util';
+
+import { useId, useMemo, useState } from 'react';
+import { styled } from '@mui/material';
+import TimezoneCountries from 'countries-and-timezones';
+import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
+
+interface IDateSingleValueProps {
+    setValue: (value: string) => void;
+    value?: string;
+    error: string;
+    setError: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const StyledInput = styled(Input)({
+    border: 'none',
+    '*': {
+        border: 'none',
+        padding: 0,
+    },
+});
+
+const Container = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row wrap',
+    alignItems: 'center',
+}));
+
+export const ConstraintDateInput = ({
+    setValue,
+    value,
+    error,
+    setError,
+}: IDateSingleValueProps) => {
+    const timezones = Object.values(
+        TimezoneCountries.getAllTimezones({ deprecated: false }) as {
+            [timezone: string]: { name: string; utcOffsetStr: string };
+        },
+    ).map((timezone) => ({
+        key: timezone.name,
+        label: `${timezone.name}`,
+        utcOffset: timezone.utcOffsetStr,
+    }));
+    const { timeZone: localTimezoneName } =
+        Intl.DateTimeFormat().resolvedOptions();
+    const [pickedDate, setPickedDate] = useState(value || '');
+    const inputId = useId();
+    const helpId = useId();
+
+    const timezoneText = useMemo<string>(() => {
+        const localTimezone = timezones.find(
+            (t) => t.key === localTimezoneName,
+        );
+        if (localTimezone != null) {
+            return `${localTimezone.key} (UTC ${localTimezone.utcOffset})`;
+        } else {
+            return 'The time shown is in your local time zone according to your browser.';
+        }
+    }, [timezones, localTimezoneName]);
+
+    if (!value) return null;
+
+    return (
+        <Container>
+            <label htmlFor={inputId}>
+                <ScreenReaderOnly>Date</ScreenReaderOnly>
+            </label>
+            <StyledInput
+                id={inputId}
+                aria-describedby={helpId}
+                hiddenLabel
+                label=''
+                size='small'
+                type='datetime-local'
+                value={parseDateValue(pickedDate)}
+                onChange={(e) => {
+                    setError('');
+                    const parsedDate = parseValidDate(e.target.value);
+                    const dateString = parsedDate?.toISOString();
+                    dateString && setPickedDate(dateString);
+                    dateString && setValue(dateString);
+                }}
+                InputLabelProps={{
+                    shrink: true,
+                }}
+                error={Boolean(error)}
+                errorText={error}
+                required
+            />
+            <HelpIcon htmlTooltip tooltip={<p id={helpId}>{timezoneText}</p>} />
+        </Container>
+    );
+};
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
index d48ba424cc..bc63aa39b8 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
@@ -30,6 +30,7 @@ import { ResolveInput } from 'component/common/NewConstraintAccordion/Constraint
 import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg';
 import { ReactComponent as NotEqualsIcon } from 'assets/icons/constraint-not-equals.svg';
 import { AddSingleValueWidget } from './AddSingleValueWidget';
+import { ConstraintDateInput } from './ConstraintDateInput';
 
 const Container = styled('article')(({ theme }) => ({
     '--padding': theme.spacing(2),
@@ -208,6 +209,7 @@ export const EditableConstraint: FC<Props> = ({
     const showSingleValueButton = SINGLE_VALUE_OPERATORS.includes(input);
     const showAddValuesButton =
         OPERATORS_WITH_ADD_VALUES_WIDGET.includes(input);
+    const showDateInput = input.includes('DATE');
     const showInputField = input.includes('LEGAL_VALUES');
 
     /* We need a special case to handle the currentTime context field. Since
@@ -362,6 +364,14 @@ export const EditableConstraint: FC<Props> = ({
                             currentValue={localConstraint.value}
                         />
                     ) : null}
+                    {showDateInput ? (
+                        <ConstraintDateInput
+                            setValue={setValue}
+                            value={localConstraint.value}
+                            error={error}
+                            setError={setError}
+                        />
+                    ) : null}
                 </ConstraintDetails>
                 <ButtonPlaceholder />
                 <HtmlTooltip title='Delete constraint' arrow>