fix: 🐛 解决wheel选择器没有12月的问题！

Author: limintao

.gitignore

@@ -70,4 +70,11 @@ android/keystores/debug.keystore
 lib/
 
 .env
-web-build
+web-build
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+example/.yarn/*

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -5,9 +5,9 @@
 # react-native-date-picker
 
 [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/limintao/react-native-date-picker/blob/main/LICENSE)
-[![npm version](https://img.shields.io/npm/v/eact-native-date-picker.svg?style=flat)](https://www.npmjs.com/package/eact-native-date-picker)
-[![npm](https://img.shields.io/npm/dt/eact-native-date-picker.svg)](https://www.npmjs.com/package/eact-native-date-picker)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/limintao/react-native-dates-picker/blob/main/LICENSE)
+[![npm version](https://img.shields.io/npm/v/react-native-dates-picker.svg?style=flat)](https://www.npmjs.com/package/react-native-dates-picker)
+[![npm](https://img.shields.io/npm/dt/react-native-dates-picker.svg)](https://www.npmjs.com/package/react-native-dates-picker)
 
 React Native 的 DateTimePicker 组件，允许你创建一个可自定义的日期和时间选择器。该组件使用 [Day.js](https://day.js.org/) 库，并包含一组样式属性，使你可以根据自己的 UI 设计更改日历的每一项。
 

example/src/App.tsx

@@ -214,11 +214,11 @@ export default function App() {
               dates={dates}
               displayFullDays
               timePicker={timePicker}
-              // minDate={dayjs().startOf('second')}
-              // maxDate={dayjs().add(4, 'day').endOf('second')}
+              // minDate={range.startDate}
+              // maxDate={new Date()}
               //firstDayOfWeek={1}
               // columns={['year', 'month', 'day', 'hour', 'minute', 'second']}
-              onChange={onChange}
+              // onChange={onChange}
               headerButtonColor={theme?.mainColor}
               selectedItemColor={theme?.mainColor}
               // eslint-disable-next-line react-native/no-inline-styles

example/yarn.lock

@@ -1,6 +1,6 @@
 {
   "name": "react-native-dates-picker",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Customizable date picker for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -31,7 +31,7 @@
     "lint": "eslint .",
     "prepack": "bob build",
     "release": "release-it",
-    "example": "yarn --cwd example",
+    "example": "cd example && yarn start",
     "bootstrap": "yarn example && yarn install"
   },
   "keywords": [

package.json

@@ -209,57 +209,72 @@ const DateTimePicker = (
 
   const onSelectDate = useCallback(
     (datetime: DateType) => {
-      if (onChange)
-        if (mode === 'single') {
-          const newDate = timePicker ? datetime : getStartOfDay(datetime);
-
-          dispatch({
-            type: CalendarActionKind.CHANGE_CURRENT_DATE,
-            payload: newDate,
-          });
-
-          (onChange as SingleChange)({
-            date: newDate,
-          });
-        } else if (mode === 'range') {
-          const sd = state.startDate;
-          const ed = state.endDate;
-          let isStart: boolean = true;
-
-          if (sd && !ed && dateToUnix(datetime) >= dateToUnix(sd!))
-            isStart = false;
-
-          (onChange as RangeChange)({
-            startDate: isStart ? getStartOfDay(datetime) : sd,
-            endDate: !isStart ? getEndOfDay(datetime) : undefined,
-          });
-        } else if (mode === 'multiple') {
-          const safeDates = (state.dates as DateType[]) || [];
-          const newDate = getStartOfDay(datetime);
-
-          const exists = safeDates.some((ed) => areDatesOnSameDay(ed, newDate));
-
-          const newDates = exists
-            ? safeDates.filter((ed) => !areDatesOnSameDay(ed, newDate))
-            : [...safeDates, newDate];
-
-          newDates.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1));
-
-          (onChange as MultiChange)({
-            dates: newDates,
-            datePressed: newDate,
-            change: exists ? 'removed' : 'added',
-          });
-        } else if (mode === 'wheel') {
-          dispatch({
-            type: CalendarActionKind.CHANGE_CURRENT_DATE,
-            payload: datetime,
-          });
-
-          (onChange as SingleChange)({
-            date: datetime,
-          });
-        }
+      if (mode === 'single') {
+        const newDate = timePicker ? datetime : getStartOfDay(datetime);
+
+        dispatch({
+          type: CalendarActionKind.CHANGE_CURRENT_DATE,
+          payload: newDate,
+        });
+
+        (onChange as SingleChange)?.({
+          date: newDate,
+        });
+      } else if (mode === 'range') {
+        const sd = state.startDate;
+        const ed = state.endDate;
+        let isStart: boolean = true;
+
+        if (sd && !ed && dateToUnix(datetime) >= dateToUnix(sd!))
+          isStart = false;
+
+        const newDateRang = {
+          startDate: isStart ? getStartOfDay(datetime) : sd,
+          endDate: !isStart ? getEndOfDay(datetime) : undefined,
+        };
+
+        dispatch({
+          type: CalendarActionKind.CHANGE_SELECTED_RANGE,
+          payload: newDateRang,
+        });
+
+        (onChange as RangeChange)?.(newDateRang);
+      } else if (mode === 'multiple') {
+        const safeDates = (state.dates as DateType[]) || [];
+        const newDate = getStartOfDay(datetime);
+
+        const exists = safeDates.some((ed) => areDatesOnSameDay(ed, newDate));
+
+        const newDates = exists
+          ? safeDates.filter((ed) => !areDatesOnSameDay(ed, newDate))
+          : [...safeDates, newDate];
+
+        newDates.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1));
+
+        const newDatesObj = {
+          dates: newDates,
+          datePressed: newDate,
+          change: (exists
+            ? 'removed'
+            : 'added') as Parameters<MultiChange>[0]['change'],
+        };
+
+        dispatch({
+          type: CalendarActionKind.CHANGE_SELECTED_MULTIPLE,
+          payload: newDatesObj,
+        });
+
+        (onChange as MultiChange)?.(newDatesObj);
+      } else if (mode === 'wheel') {
+        dispatch({
+          type: CalendarActionKind.CHANGE_CURRENT_DATE,
+          payload: datetime,
+        });
+
+        (onChange as SingleChange)?.({
+          date: datetime,
+        });
+      }
     },
     [onChange, mode, timePicker, state.startDate, state.endDate, state.dates]
   );

src/DateTimePicker.tsx

@@ -14,7 +14,7 @@ import {
 function createNumberList(start: number, end: number) {
   return new Array(end - start)
     .fill(0)
-    .map((_, index) => String(index + start).padStart(2, '0'));
+    .map((_, index) => String(index + 1 + start).padStart(2, '0'));
 }
 
 const DatePicker = () => {
@@ -41,15 +41,16 @@ const DatePicker = () => {
 
   const { year: startYear, month: startMonth } = getParsedDate(minDate);
   const { year: endYear, month: endMonth } = getParsedDate(maxDate);
-  const years = createNumberList(startYear, endYear + 1);
+  const years = createNumberList(startYear, endYear);
   const months = useMemo(
     () =>
       createNumberList(
-        startYear === year ? startMonth + 1 : 1,
-        endYear === year ? endMonth + 2 : 12
+        startYear === year ? startMonth : 0,
+        endYear === year ? endMonth + 1 : 12
       ),
     [endMonth, endYear, startMonth, startYear, year]
   );
+
   const days = useMemo(
     () => getDaysNumInMonth(year, month + 1, minDate, maxDate),
     [year, month, minDate, maxDate]

src/components/DatePicker.tsx

@@ -117,7 +117,7 @@ const DaySelector = () => {
               if (inRange && !leftCrop && !rightCrop) isSelected = false;
             }
           } else if (mode === 'single')
-            isSelected = areDatesOnSameDay(day.date, date);
+            isSelected = areDatesOnSameDay(day.date, currentDate);
 
           return {
             ...day,
@@ -143,6 +143,7 @@ const DaySelector = () => {
       startDate,
       endDate,
       dates,
+      currentDate,
     ]
   );
 
@@ -165,8 +166,8 @@ const DaySelector = () => {
         ))}
       </View>
       <View style={[styles.daysContainer, theme.daysPanelStyle]}>
-        {daysGrid?.map((day, index) => {
-          return day ? (
+        {daysGrid?.map((day, index) =>
+          day ? (
             <Day
               key={index}
               date={day.date}
@@ -184,8 +185,8 @@ const DaySelector = () => {
             />
           ) : (
             <EmptyDay key={index} height={height} />
-          );
-        })}
+          )
+        )}
       </View>
     </View>
   );

src/components/DaySelector.tsx

@@ -11,9 +11,9 @@ import { useCalendarContext } from '../CalendarContext';
 import { getDateYear, getYearRange } from '../utils';
 
 const YearSelector = () => {
-  const { currentDate, currentYear, date, onSelectYear, theme } =
+  const { currentDate, currentYear, onSelectYear, theme } =
     useCalendarContext();
-  const selectedYear = getDateYear(date);
+  const selectedYear = getDateYear(currentDate);
 
   const generateCells = useCallback(() => {
     const years = getYearRange(currentYear);