Add textColor and backgroundColor props to DateTimePicker component (#…

…3481) * Add textColor and backgroundColor props to DateTimePicker component * Add cancelButtonProps to DateTimePickerScreen for customizable icon style
wix · Jan 7, 2025 · c2bc66c · c2bc66c
1 parent 70c99d7
commit c2bc66c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -66,6 +66,9 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
+            // textColor={Colors.red30}
+            // backgroundColor={Colors.$backgroundDark}
+            // cancelButtonProps={{iconStyle: {tintColor: Colors.$iconDefaultLight}}}
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker

diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
@@ -94,6 +94,14 @@ export type DateTimePickerProps = OldApiProps &
      * Allows changing the visual display of the picker
      */
     display?: string;
+    /**
+     * Text color of the wheel picker items
+     */
+    textColor?: string;
+    /**
+     * Background color of the wheel picker
+     */
+    backgroundColor?: string;
     /**
      * Confirm button props
      */
@@ -137,6 +145,8 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     onChange,
     dialogProps,
     migrateDialog,
+    textColor = Colors.$textDefault,
+    backgroundColor = Colors.$backgroundDefault,
     headerStyle,
     testID,
     display = Constants.isIOS ? 'spinner' : undefined,
@@ -186,6 +196,10 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     };
   }, [dialogProps, testID]);
 
+  const dateTimePickerStyle = useMemo(() => {
+    return {backgroundColor};
+  }, [backgroundColor]);
+
   const {getStringValue: getStringValueOld} = useOldApi({dateFormat, dateFormatter, timeFormat, timeFormatter});
 
   const getStringValue = () => {
@@ -240,6 +254,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
         row
         spread
         bg-$backgroundDefault
+        backgroundColor={backgroundColor}
         paddingH-20
         style={[styles.header, headerStyle]}
         testID={`${testID}.header`}
@@ -280,6 +295,8 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
         minuteInterval={minuteInterval}
         timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
         display={display}
+        textColor={textColor}
+        style={dateTimePickerStyle}
         themeVariant={themeVariant}
         testID={`${testID}.picker`}
       />