stephy / CalendarPicker

CalendarPicker Component for React Native
787 stars 369 forks source link

Today's date is continuously using `selectedDayTextColor` #331

Open NatalieDinh opened 1 year ago

NatalieDinh commented 1 year ago

I am currently trying to make the selected dates have a black circle with a green text. However, the current date is always using the green text when it is not the selected date.

In this picture, I have set the callback for each date text to have the same styling.

Screen Shot 2022-11-02 at 11 57 59 AM

Here is where I am setting today's date as a white background and the selectedDate as a black background with green text.

Screen Shot 2022-11-02 at 11 54 36 AM

However, as shown here, when a different date is selected the '2' does not return to the default color but instead stays as the selectedDayTextColor which is set to green.

Screen Shot 2022-11-02 at 11 58 31 AM
peacechen commented 1 year ago

Try providing the selectedStartDate prop. Your code will need to maintain its own state for that variable through the onDateChange callback.

It seems odd that the switch statement in customDateStylesCallback always returns styles.dateText. Maybe that's intentional or you left out other cases?

NatalieDinh commented 1 year ago

@peacechen That was intentional! I did end up refactoring it and getting rid of the switch statement. But I'll give that selectedStartDate prop a go right now

NatalieDinh commented 1 year ago

Unfortunately the selectedStartDate did not fix the issue. Today's date still comes up as green

levanthuanmy commented 1 year ago

I'm facing the same issue, do we have any solution?

NatalieDinh commented 1 year ago

@levanthuanmy It doesn’t look like it. I never got a response back after that, I ended up not using this package

BrodaNoel commented 1 year ago

Same thing here.

BrodaNoel commented 1 year ago

These are my props where I reproduce it:

<CalendarPicker
          initialDate={date}
          selectYearTitle="Elije un año"
          selectMonthTitle="Elije un mes en "
          previousTitle="<"
          nextTitle=">"
          maxDate={new Date()}
          weekdays={DAYS}
          months={MONTHS}
          onDateChange={date => {
            setDate(new Date(date));
          }}
          textStyle={{ color: '#000' }}
          selectedDayStyle={{ backgroundColor: 'orange' }}
          selectedDayTextStyle={{ color: '#fff' }}
        />
peacechen commented 1 year ago

This looks like a bug. Would you mind creating a PR to fix it? The best way to do that is use the Sample Application and development instructions.

Longer term, this library should be refactored to use React Hooks. The state management has become increasingly convoluted.