chore: Update property filter custom form demo (#152)

src/pages/table-date-filter/table-date-filter-forms.jsx

@@ -5,6 +5,8 @@ import Calendar from '@cloudscape-design/components/calendar';
 import DateInput from '@cloudscape-design/components/date-input';
 import FormField from '@cloudscape-design/components/form-field';
 import TimeInput from '@cloudscape-design/components/time-input';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import DatePicker from '@cloudscape-design/components/date-picker';
 
 export function DateTimeForm({ filter, operator, value, onChange }) {
   // Using the most reasonable default time per operator.
@@ -43,30 +45,45 @@ export function DateTimeForm({ filter, operator, value, onChange }) {
     [dateValue, timeValue]
   );
 
+  const dateInputProps = {
+    placeholder: 'YYYY/MM/DD',
+    value: dateValue,
+    onChange: event => onChangeDate(event.detail.value),
+  };
+  const timeInputProps = {
+    format: 'hh:mm:ss',
+    placeholder: 'hh:mm:ss',
+    value: timeValue,
+    onChange: event => onChangeTime(event.detail.value),
+  };
+  const calendarProps = { value: dateValue, locale: 'en-EN', onChange: event => onChangeDate(event.detail.value) };
+
+  if (typeof filter !== 'undefined') {
+    return (
+      <div className="date-time-form">
+        <FormField description="Date" constraintText="Use YYYY/MM/DD format.">
+          <DateInput {...dateInputProps} />
+        </FormField>
+
+        <FormField description="Time" constraintText="Use 24-hour format.">
+          <TimeInput {...timeInputProps} />
+        </FormField>
+
+        <Calendar {...calendarProps} />
+      </div>
+    );
+  }
+
   return (
-    <div className="date-time-form">
+    <SpaceBetween direction="vertical" size="m">
       <FormField description="Date" constraintText="Use YYYY/MM/DD format.">
-        <DateInput placeholder="YYYY/MM/DD" value={dateValue} onChange={event => onChangeDate(event.detail.value)} />
+        <DatePicker {...dateInputProps} {...calendarProps} />
       </FormField>
 
       <FormField description="Time" constraintText="Use 24-hour format.">
-        <TimeInput
-          format="hh:mm:ss"
-          placeholder="hh:mm:ss"
-          value={timeValue}
-          onChange={event => onChangeTime(event.detail.value)}
-        />
+        <TimeInput {...timeInputProps} />
       </FormField>
-
-      <Calendar
-        value={dateValue}
-        locale="en-EN"
-        previousMonthAriaLabel="Previous month"
-        nextMonthAriaLabel="Next month"
-        todayAriaLabel="Today"
-        onChange={event => onChangeDate(event.detail.value)}
-      />
-    </div>
+    </SpaceBetween>
   );
 }