Problem with range styles

[endenwer]

When I select first date in the range it is styled wrong. But when I click twice on that date it is styled like circle. Is it a bug or feature? Can I change behavior like on gif from readme?

I use it with clojurescript but it is similar to example from readme.

[calendar-picker {:allow-range-selection true
                  :selected-day-color colors/turquoise
                  :selected-day-text-color colors/white
                  :start-from-monday true
                  :min-date (js/Date.)
                  :on-date-change #(.log js/console %)}]

[peacechen]

This is by design as it helps the user to know that they are selecting a range, that they've selected the start date, and that they should select an end date. If it were a circle like the single date selection, it's not clear to the user that they need to select an end date. We've done user testing to determine this.

I agree that the sample bitmap is misleading. It should be updated to reflect this behavior.

[endenwer]

Thanks for the response. Closing the issue then.

[Saad-Bashar]

@peacechen , is there any update on this? sometimes the user also does not know that they need to double tap on the date to select a single date. How should we handle this confusion?

[peacechen]

In an app that I developed with this, I added text below the calendar which said "Select start date" or "Select end date" based on initial state and the results from onDateChange(). This could be incorporated into CalendarPicker. I would recommend two props added, selectStartDateMessage and selectEndDateMessage. They should accept React components so that users can customize it to their heart's content, and set the default as a plain <Text> component with the standard messages. I don't have time to add this, but it should be a straight-forward change. Please submit a PR and I'll merge it.