Code Review: add dateFormat and placeholderText as variables

fortanix · Dec 13, 2024 · 7c05944 · 7c05944
1 parent 7d63e83
commit 7c05944
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/src/components/forms/controls/DatePicker/DatePicker.tsx b/src/components/forms/controls/DatePicker/DatePicker.tsx
@@ -36,6 +36,8 @@ export const DatePicker = (props: DatePickerProps) => {
   const {
     unstyled = false,
     className,
+    dateFormat = 'MM/dd/yyyy',
+    placeholderText = 'MM/DD/YYYY',
     ...propsRest
   } = props;
 
@@ -48,8 +50,8 @@ export const DatePicker = (props: DatePickerProps) => {
       className,
     )}>
       <ReactDatePicker
-        dateFormat="MM/dd/yyyy"
-        placeholderText="MM/DD/YYYY"
+        dateFormat={dateFormat}
+        placeholderText={placeholderText}
         showIcon
         icon={<Icon icon="calendar"/>}
         customInput={

diff --git a/src/components/forms/controls/DatePicker/DatePickerRange.tsx b/src/components/forms/controls/DatePicker/DatePickerRange.tsx
@@ -35,6 +35,8 @@ export const DatePickerRange = (props: DatePickerRangeProps) => {
   const {
     unstyled = false,
     className,
+    dateFormat = 'MM/dd/yyyy',
+    placeholderText = 'MM/DD/YYYY',
     ...propsRest
   } = props;
 
@@ -47,8 +49,8 @@ export const DatePickerRange = (props: DatePickerRangeProps) => {
       <ReactDatePicker
         selectsRange
         // everything else is the same
-        dateFormat="MM/dd/yyyy"
-        placeholderText="MM/DD/YYYY"
+        dateFormat={dateFormat}
+        placeholderText={placeholderText}
         customInput={<Input />}
         {...propsRest}
       />

diff --git a/src/components/forms/controls/DateTimePicker/DateTimePicker.tsx b/src/components/forms/controls/DateTimePicker/DateTimePicker.tsx
@@ -12,7 +12,7 @@ import { TimePicker, type Time } from '../TimePicker/TimePicker.tsx';
 import cl from './DateTimePicker.module.scss';
 
 
-type GenericProps = {
+export type DateTimePickerProps = {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
@@ -24,11 +24,22 @@ type GenericProps = {
 
   /** A callback function that is called when either the date or the time picker is changed. */
   onChange: ((date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void),
+
+  /** A string for the date format, such as MM/dd/yyyy. */
+  dateFormat: string,
+
+  /** A string for the placeholder text, such as MM/DD/YYYY. */
+  placeholderText: string,
 };
 
-export type DateTimePickerProps = GenericProps;
-
-export const DateTimePicker = ({ unstyled = false, className, date, onChange, ...propsRest }: DateTimePickerProps) => {
+export const DateTimePicker = ({
+  unstyled = false,
+  className,
+  date,
+  onChange,
+  dateFormat = 'MM/dd/yyyy',
+  placeholderText = 'MM/DD/YYYY',
+}: DateTimePickerProps) => {
   // Time from date object.
   const time = { hours: date?.getHours() || 0, minutes: date?.getMinutes() || 0 };
 
@@ -51,6 +62,8 @@ export const DateTimePicker = ({ unstyled = false, className, date, onChange, ..
       <DatePicker
         selected={date}
         onChange={onChange}
+        dateFormat={dateFormat}
+        placeholderText={placeholderText}
       />
       <TimePicker
         time={time}