feat: ✨ 添加日期格式设置！

Author: limintao

README.md

@@ -73,16 +73,17 @@ const styles = StyleSheet.create({
 
 ## Calendar props
 
-| Name            | Type       | Default       | Description                                                       |
-| --------------- | ---------- | ------------- | ----------------------------------------------------------------- |
-| mode            | `string`   | `'single'`    | 定义 DatePicker 的模式 `['single', 'range', 'multiple', 'wheel']`   |
-| locale          | `string`   | `'zh-cn'`     | 定义 DatePicker 的语言环境，使用其他语言需要从dayjs引入语言包            |
-| minDate         | `DateType` | `null`        | 定义 DatePicker 的最小可选日期                                       |
-| maxDate         | `DateType` | `null`        | 定义 DatePicker 的最大可选日期                                       |
-| firstDayOfWeek  | `number`   | `0`           | 定义一周的起始日，范围为 0-6，其中 0 表示星期天，6 表示星期六              |
-| displayFullDays | `boolean`  | `false`       | 定义是否在当前日历视图中显示上个月和下个月的日期                          |
-| initialView     | `string`   | `'day'`       | 定义 DatePicker 的初始视图 `['day', 'month', 'year', 'time']`       |
-| height          | `number`   | `'undefined'` | 定义日历视图的高度                                                   |
+| Name            | Type       | Default                 | Description                                                       |
+| --------------- | ---------- | ----------------------- | ----------------------------------------------------------------- |
+| mode            | `string`   | `'single'`              | 定义 DatePicker 的模式 `['single', 'range', 'multiple', 'wheel']` |
+| locale          | `string`   | `'zh-cn'`               | 定义 DatePicker 的语言环境，使用其他语言需要从dayjs引入语言包     |
+| minDate         | `DateType` | `null`                  | 定义 DatePicker 的最小可选日期                                    |
+| maxDate         | `DateType` | `null`                  | 定义 DatePicker 的最大可选日期                                    |
+| firstDayOfWeek  | `number`   | `0`                     | 定义一周的起始日，范围为 0-6，其中 0 表示星期天，6 表示星期六     |
+| displayFullDays | `boolean`  | `false`                 | 定义是否在当前日历视图中显示上个月和下个月的日期                  |
+| initialView     | `string`   | `'day'`                 | 定义 DatePicker 的初始视图 `['day', 'month', 'year', 'time']`     |
+| height          | `number`   | `'undefined'`           | 定义日历视图的高度                                                |
+| format          | `string`   | `'YYYY/MM/DD HH:mm:ss'` | 设置日期格式                                                      |
 
 <p align="center">
 <img src="/screenshot/modes-screenshot.png" />

src/DateTimePicker.tsx

@@ -13,7 +13,6 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import 'dayjs/locale/zh-cn';
 import {
-  getFormatted,
   dateToUnix,
   getEndOfDay,
   getStartOfDay,
@@ -100,6 +99,7 @@ const DateTimePicker: React.FC<
     startDate,
     endDate,
     dates,
+    format = 'YYYY-MM-DD HH:mm:ss',
     onChange,
     initialView = 'day',
     height,
@@ -306,21 +306,27 @@ const DateTimePicker: React.FC<
         });
 
         (onChange as SingleChange)?.({
-          date: newDate,
+          date: dayjs(newDate).format(format),
         });
       } else if (mode === 'range') {
         const sd = stateRef.current.startDate;
         const ed = stateRef.current.endDate;
 
         let newDateRang: Parameters<RangeChange>[0] = {
-          startDate: getStartOfDay(datetime),
+          startDate: getStartOfDay(datetime).format(format),
           endDate: undefined,
         };
         if (sd && !ed) {
           if (dateToUnix(datetime) >= dateToUnix(sd!)) {
-            newDateRang = { startDate: sd, endDate: getEndOfDay(datetime) };
+            newDateRang = {
+              startDate: dayjs(sd).format(format),
+              endDate: getEndOfDay(datetime).format(format),
+            };
           } else {
-            newDateRang = { startDate: getStartOfDay(datetime), endDate: sd };
+            newDateRang = {
+              startDate: getStartOfDay(datetime).format(format),
+              endDate: dayjs(sd).format(format),
+            };
           }
         }
 
@@ -343,8 +349,8 @@ const DateTimePicker: React.FC<
         newDates.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1));
 
         const newDatesObj = {
-          dates: newDates,
-          datePressed: newDate,
+          dates: newDates.map((d) => dayjs(d).format(format)),
+          datePressed: newDate.format(format),
           change: (exists
             ? 'removed'
             : 'added') as Parameters<MultiChange>[0]['change'],
@@ -363,11 +369,11 @@ const DateTimePicker: React.FC<
         });
 
         (onChange as SingleChange)?.({
-          date: datetime,
+          date: dayjs(datetime).format(format),
         });
       }
     },
-    [onChange, mode, timePicker]
+    [format, mode, timePicker, onChange]
   );
 
   const onSelectMonth = useCallback(
@@ -381,9 +387,9 @@ const DateTimePicker: React.FC<
       });
       if (mode !== 'wheel') setCalendarView('day');
       if (mode === 'single' || mode === 'wheel')
-        (onChange as SingleChange)?.({ date: getFormatted(newDate) });
+        (onChange as SingleChange)?.({ date: newDate.format(format) });
     },
-    [maxDate, minDate, mode, onChange, setCalendarView]
+    [format, maxDate, minDate, mode, onChange, setCalendarView]
   );
 
   const onSelectYear = useCallback(
@@ -397,9 +403,9 @@ const DateTimePicker: React.FC<
       });
       if (mode !== 'wheel') setCalendarView('day');
       if (mode === 'single' || mode === 'wheel')
-        (onChange as SingleChange)?.({ date: getFormatted(newDate) });
+        (onChange as SingleChange)?.({ date: newDate.format(format) });
     },
-    [maxDate, minDate, mode, setCalendarView, onChange]
+    [format, maxDate, minDate, mode, setCalendarView, onChange]
   );
 
   const onChangeMonth = useCallback((month: number) => {

src/types.ts

@@ -25,6 +25,7 @@ export type CalendarAction = {
 };
 
 export type CalendarThemeProps = {
+  format?: string;
   containerStyle?: ViewStyle;
   headerButtonsPosition?: HeaderButtonPositions;
   headerContainerStyle?: ViewStyle;

src/utils.ts

@@ -154,11 +154,11 @@ export function getFirstDayOfMonth(
   return d.date(1 - firstDayOfWeek).day();
 }
 
-export function getStartOfDay(date: DateType): DateType {
+export function getStartOfDay(date: DateType): dayjs.Dayjs {
   return dayjs(date).startOf('day');
 }
 
-export function getEndOfDay(date: DateType): DateType {
+export function getEndOfDay(date: DateType): dayjs.Dayjs {
   return dayjs(date).endOf('day');
 }