diff --git a/src/components/inputs/date/date.component.tsx b/src/components/inputs/date/date.component.tsx
index e164875fb..03951afb0 100644
--- a/src/components/inputs/date/date.component.tsx
+++ b/src/components/inputs/date/date.component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useContext } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
@@ -20,9 +20,11 @@ import styles from './date.scss';
 const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, previousValue }) => {
   const { t } = useTranslation();
   const [field] = useField(question.id);
-  const { setFieldValue, encounterContext, layoutType, workspaceLayout, fields } = React.useContext(FormContext);
+  const [unspecifiedField] = useField(`${question.id}-unspecified`);
+  const { setFieldValue, encounterContext, layoutType, workspaceLayout, fields } = useContext(FormContext);
   const [time, setTime] = useState('');
   const { errors, setErrors, warnings, setWarnings } = useFieldValidationResults(question);
+  const [key, setKey] = useState(0);
 
   const isInline = useMemo(() => {
     if (['view', 'embedded-view'].includes(encounterContext.sessionMode) || isTrue(question.readonly)) {
@@ -83,6 +85,14 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
     }
   }, [field.value, time]);
 
+  useEffect(() => {
+    if (unspecifiedField.value) {
+      setFieldValue(question.id, null);
+      setTime(null);
+      setKey(prevKey => prevKey + 1);
+    }
+  }, [unspecifiedField.value]);
+
   const timePickerLabel = useMemo(
     () =>
       question.datePickerFormat === 'timer' ? (
@@ -93,7 +103,7 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
     [question.datePickerFormat, question.label, t],
   );
 
-  return encounterContext.sessionMode == 'view' || encounterContext.sessionMode == 'embedded-view' ? (
+  return encounterContext.sessionMode === 'view' || encounterContext.sessionMode === 'embedded-view' ? (
     <FieldValueView
       label={t(question.label)}
       value={field.value instanceof Date ? getDisplay(field.value, question.datePickerFormat) : field.value}
@@ -108,6 +118,7 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
             <div className={styles.datePickerSpacing}>
               <Layer>
                 <OpenmrsDatePicker
+                  key={key}
                   id={question.id}
                   onChange={onDateChange}
                   labelText={
@@ -137,7 +148,7 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
                   placeholder="HH:MM"
                   pattern="(1[012]|[1-9]):[0-5][0-9])$"
                   type="time"
-                  disabled={question.datePickerFormat === 'timer' ? question.isDisabled : !field.value ? true : false}
+                  disabled={question.datePickerFormat === 'timer' ? question.isDisabled : !field.value}
                   invalid={errors.length > 0}
                   invalidText={errors[0]?.message}
                   warning={warnings.length > 0}
@@ -146,7 +157,7 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
                     time
                       ? time
                       : field.value instanceof Date
-                        ? field.value.toLocaleDateString(window.navigator.language)
+                        ? field.value.toLocaleTimeString(window.navigator.language)
                         : field.value
                   }
                   onChange={onTimeChange}
@@ -164,7 +175,7 @@ const DateField: React.FC<FormFieldProps> = ({ question, onChange, handler, prev
 
 function getDisplay(date: Date, rendering: string) {
   const dateString = formatDate(date);
-  if (rendering == 'both') {
+  if (rendering === 'both') {
     return `${dateString} ${formatTime(date)}`;
   }
   return dateString;