diff --git a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
index 1161c55f9c..d7a3a4a346 100644
--- a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
+++ b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -62,7 +62,7 @@ export default class DateTimePickerScreen extends Component {
value={new Date('2015-03-25T12:00:00-06:30')}
/>
- Custom Input
+ Custom Input (date)
+
+ Custom Input (time)
+
+
diff --git a/package.json b/package.json
index fc95ddd755..3582d71673 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
"eslint-plugin-uilib": "file:./eslint-rules",
"gh-pages": "^1.1.0",
"jest": "^29.2.1",
+ "light-date": "^1.2.0",
"metro-react-native-babel-preset": "0.73.7",
"mocha": "^5.0.0",
"moment": "^2.24.0",
diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
index 87999999d4..fadd106421 100644
--- a/src/components/dateTimePicker/index.tsx
+++ b/src/components/dateTimePicker/index.tsx
@@ -9,7 +9,11 @@ import React, {
ForwardedRef
} from 'react';
import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
-import {DateTimePickerPackage as RNDateTimePicker, MomentPackage as moment} from '../../optionalDependencies';
+import {
+ DateTimePickerPackage as RNDateTimePicker,
+ MomentPackage as moment,
+ LightDatePackage as LightDate
+} from '../../optionalDependencies';
import {useDidUpdate} from '../../hooks';
import {Colors} from '../../style';
import Assets from '../../assets';
@@ -107,6 +111,11 @@ export type DateTimePickerProps = Omit & {
* Should migrate to the new TextField implementation
*/
migrateTextField?: boolean;
+ /**
+ * Use the LightDate library instead of moment.
+ * Only send if you have both installed and you prefer using LightDate (moment is the default).
+ */
+ useLightDate?: boolean;
};
type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
@@ -145,6 +154,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
useCustomTheme,
testID,
migrateTextField = true,
+ useLightDate,
...others
} = props;
@@ -161,14 +171,26 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
useEffect(() => {
if (!RNDateTimePicker) {
+ // eslint-disable-next-line max-len
console.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
}
}, []);
+ const format =
+ moment && (!LightDate || !useLightDate)
+ ? // @ts-expect-error
+ (date: Date, format: string) => moment(date).format(format)
+ : LightDate
+ ? // @ts-expect-error
+ (date: Date, format: string) => LightDate.format(date, format)
+ : undefined;
+
useEffect(() => {
- if (!moment && (dateFormat || timeFormat)) {
- console.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
+ if (!format && (dateFormat || timeFormat)) {
+ // eslint-disable-next-line max-len
+ console.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" or "light-date" dependency`);
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [dateFormat, timeFormat]);
useDidUpdate(() => {
@@ -199,14 +221,14 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
case MODES.DATE:
return dateFormatter
? dateFormatter(value)
- : dateFormat && moment
- ? moment(value).format(dateFormat)
+ : dateFormat && format
+ ? format(value, dateFormat)
: value.toLocaleDateString();
case MODES.TIME:
return timeFormatter
? timeFormatter(value)
- : timeFormat && moment
- ? moment(value).format(timeFormat)
+ : timeFormat && format
+ ? format(value, timeFormat)
: value.toLocaleTimeString();
}
}
diff --git a/src/optionalDependencies/LightDatePackage.ts b/src/optionalDependencies/LightDatePackage.ts
new file mode 100644
index 0000000000..57e8dd98ac
--- /dev/null
+++ b/src/optionalDependencies/LightDatePackage.ts
@@ -0,0 +1,6 @@
+let LightDatePackage: typeof import('light-date') | undefined;
+try {
+ LightDatePackage = require('light-date');
+} catch (error) {}
+
+export default LightDatePackage;
diff --git a/src/optionalDependencies/index.ts b/src/optionalDependencies/index.ts
index fa6c28eff6..9310b57742 100644
--- a/src/optionalDependencies/index.ts
+++ b/src/optionalDependencies/index.ts
@@ -2,6 +2,7 @@ export {default as DateTimePickerPackage} from './DateTimePickerPackage';
export {default as FlashListPackage} from './FlashListPackage';
export {default as BlurViewPackage} from './BlurViewPackage';
export {default as MomentPackage} from './MomentPackage';
+export {default as LightDatePackage} from './LightDatePackage';
export {default as NetInfoPackage} from './NetInfoPackage';
export {default as HapticFeedbackPackage} from './HapticFeedbackPackage';
export {default as SvgPackage} from './SvgPackage';