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';