diff --git a/react/components/DateField/DateField.jsx b/react/components/DateField/DateField.jsx
index 1279679..2ce8d16 100644
--- a/react/components/DateField/DateField.jsx
+++ b/react/components/DateField/DateField.jsx
@@ -45,7 +45,7 @@ export const dateTextFieldStyle = {
 };
 
 const DateField = ({
-    id,
+    id="default_id",
     label,
     value,
     handleDateChange,
@@ -130,6 +130,10 @@ const DateField = ({
                                 onBlur: rest?.onBlur,
                             };
                         },
+                        openPickerButton: {
+                            id: `${id}-open-picker-button`,
+                            dataTestId: `${id}-open-picker-button`
+                        }
                     }}
                     slots={{ textField: TextField }}
                 />
diff --git a/react/components/DateTimeField/DateTimeField.jsx b/react/components/DateTimeField/DateTimeField.jsx
index 4df7678..16578a8 100644
--- a/react/components/DateTimeField/DateTimeField.jsx
+++ b/react/components/DateTimeField/DateTimeField.jsx
@@ -50,6 +50,7 @@ const DateTimeField = ({
     dateTimeValue,
     handleDateTimeChange,
     disabled,
+    id = "default_dateTime-input",
 }) => {
     return (
         <FormControl>
@@ -67,9 +68,13 @@ const DateTimeField = ({
                     disabled={disabled}
                     slotProps={{
                         textField: {
-                            id: "dateTime",
+                            id: id, // textfield will delegate an input data-testid based off id
                             sx: dateTimeTextFieldStyle,
                         },
+                        openPickerButton: {
+                            id: `${id}-open-picker-button`,
+                            dataTestId: `${id}-open-picker-button`
+                        }
                     }}
                     slots={{ textField: TextField }}
                 />
@@ -78,6 +83,7 @@ const DateTimeField = ({
     );
 };
 DateTimeField.propTypes = {
+    id: PropTypes.string,
     dateTimeValue: PropTypes.object,
     handleDateTimeChange: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
diff --git a/react/components/DateTimeField/DateTimeField.stories.jsx b/react/components/DateTimeField/DateTimeField.stories.jsx
index b4f9c75..5eb04df 100644
--- a/react/components/DateTimeField/DateTimeField.stories.jsx
+++ b/react/components/DateTimeField/DateTimeField.stories.jsx
@@ -17,6 +17,7 @@ export const TimeDateFieldComponent = (args) => {
         <div className="qpp-u-padding--16">
             <DateTimeField
                 // disabled={true}
+                id="status_date_time"
                 label="Status Date/Time"
                 handleDateTimeChange={handleDateTimeChange}
                 dateTimeValue={value}