Merge branch 'release/0.18.8'

CHANGELOG.mdx

@@ -17,6 +17,12 @@ Prefix the change with one of these keywords:
 
 ## [Unreleased]
 
+##[0.18.8]
+
+### Changed
+
+- updated the date picker component to have clearable and other attributes for hr project
+
 ## [0.18.7]
 
 ### Added
@@ -30,6 +36,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

lib/components/Form/DateTime/DateTime.tsx

@@ -12,21 +12,20 @@ export interface DateTimeProps extends FieldComponentProps {
   dateFormat?: string
   timeFormat?: string
   placeholder?: string
-  onChange?: (date: Date) => void
+  isClearable?: boolean
+  onChange?: (date: Date | null) => void
 }
 
 export const DateTime = ({ ...props }: DateTimeProps) => {
-  const { name, placeholder, dateFormat = 'MMMM d, yyyy', showTime, timeFormat, onChange, ...rest } = props
+  const { name, placeholder, dateFormat = 'MMMM d, yyyy', showTime, timeFormat, onChange, isClearable, ...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 +36,21 @@ export const DateTime = ({ ...props }: DateTimeProps) => {
   return (
     <>
       <DatePicker
-        selected={field.value}
+        isClearable={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}
       />

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: '',
   }
 
@@ -396,6 +396,7 @@ export const SimpleDate: Story = () => {
           name="startDate"
           maxDate={formikProps.values.endDate}
           disabled={formikProps.isSubmitting}
+          isClearable
         />
         <Form.FieldControl
           required

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carletonuniversity/rds",
-  "version": "0.18.7",
+  "version": "0.18.8",
   "private": false,
   "description": "Raven Design System is Carleton University's design system",
   "author": "Web Services",