Fix/wsdev 4945 update date fields (#440)

* change: fixed validation bug and added clear button to date field * change: added autocomplete to date field * change: updating the blur and having an initial value : * change: added changes to changelog * change: modified change log and removed console log --------- Co-authored-by: Ishdeep Singh <[email protected]>
cuweb · Nov 6, 2024 · 965f3fd · 965f3fd
1 parent 4f8329f
commit 965f3fd
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
@@ -30,6 +30,10 @@ Prefix the change with one of these keywords:
 
 - Nav component icon style for desktop and mobile with and without title
 
+### Changed
+
+- Added clear button and autocomplete to date time picker component and fixed validation error for input fields.
+
 ### Fixed
 
 - Footer style issue to text align center in
@@ -2016,3 +2020,4 @@ Prefix the change with one of these keywords:
 ### Changed
 
 - Made social login buttons optional on login page
+
diff --git a/lib/components/Form/DateTime/DateTime.tsx b/lib/components/Form/DateTime/DateTime.tsx
@@ -12,21 +12,19 @@ export interface DateTimeProps extends FieldComponentProps {
   dateFormat?: string
   timeFormat?: string
   placeholder?: string
-  onChange?: (date: Date) => void
+  onChange?: (date: Date | null) => void
 }
 
 export const DateTime = ({ ...props }: DateTimeProps) => {
   const { name, placeholder, dateFormat = 'MMMM d, yyyy', showTime, timeFormat, onChange, ...rest } = props
 
   const [field, , helpers] = useField(name)
 
-  const { setValue, setTouched, setError } = helpers
+  const { setValue, setError, setTouched } = helpers
 
-  const handleDateChange = (date: Date) => {
-    setValue(date)
-    setTouched(true)
+  const handleDateChange = (date: Date | null) => {
+    setValue(date, true)
     setError(undefined)
-
     if (onChange) {
       onChange(date)
     }
@@ -37,18 +35,21 @@ export const DateTime = ({ ...props }: DateTimeProps) => {
   return (
     <>
       <DatePicker
-        selected={field.value}
+        isClearable
         name={name}
         id={name}
-        onChange={(date: Date | null) => {
-          if (date) {
-            handleDateChange(date)
-          }
-        }}
-        showTimeSelect={showTime}
+        autoComplete="on"
+        selected={field.value ? field.value : null}
         timeFormat={timeFormat}
         dateFormat={dateFormat}
         placeholderText={placeholder ? placeholder : dateFormat}
+        showTimeSelect={showTime}
+        onBlur={() => {
+          setTouched(true, true)
+        }}
+        onChange={(date: Date | null) => {
+          handleDateChange(date)
+        }}
         className={`${fieldStyles.input} ${fieldStyles.disabled} ${errorClass} w-full`}
         {...rest}
       />

diff --git a/lib/components/Form/Form.stories.tsx b/lib/components/Form/Form.stories.tsx
@@ -348,7 +348,7 @@ export const SimpleDate: Story = () => {
   }
 
   const dateInitialValues = {
-    startDate: '',
+    startDate: 'Sat Nov 23 2024 00:00:00 GMT-0500 (Eastern Standard Time)',
     endDate: '',
   }