Hello friends can somebody help me with this basic question? In the document and examples it shows how to use month/year DropBox for one calendar. Can somebody help how to have this feature for 2 calendars? When I select a month from the second calendar it changes the first calendar. I am new to react - thank you.
When I select a month from the second calendar it changes the first calendar- i want a combination of these 2 examples:
https://react-day-picker.js.org/examples/selected-range
https://react-day-picker.js.org/examples/elements-year-navigation
Hey guys.
What API for date does DayPicker use?
I'm mocking Date in mytest as https://jsfiddle.net/st06zenL/ here and keep getting console warning: Encountered two children with the same key, 197001.
I see that dates in calendar are actually correct, but aria-label="Thu Jan 01 1970"
Seems that my date mock breaks the library.
Any ideas?
I am having an issue, gpbl/react-day-picker#1045, utilizing the DayPicker api for use of the pop-up calendar. I need to close/hide when I click outside the calendar. I want to work like the DayPickerInput component work but with our the textbox input. I ONLY need the popup calendar. Using onBlur only partially works because if I click a week, it does not immediately recognize the focus the calendar container. I am really struggling with this and I am sure there is a simple solution.
Here is code snippet:
<div className={calendarPopOut} onBlur={handleClickOutside}>
<DayPicker
disabledDays={currentCalendarWeek}
className={dayPicker}
showOutsideDays
month={currentSelectedMonth}
toMonth={currentMonth}
weekdayElement={<ThreeCharacterAbv />}
onDayClick={handleChange}
onBlur={handleClickOutside}
/></div>
react-day-picker to work like a material design day picker; but I have some specific UX requirements on top of that to address as well; like I need to completely swap out the navigation for my own (we use two select boxes for picking which month/year you're looking at)
Hi guys. Sorry, I tried to search over the history by the word "range" but haven't found any relevant info for my issue. I'm trying to use your component to solve such a task:
- it should be a single DateInput (with dropdown ability, not statically shown picker)
- it should give an ability to select date range with a period of more than a month
- it should show range by hover
unfortunately your example of date range is made not with using of dateinput, but with a static picker. also there is an example of a dynamic rendering of ranges but it is also made with static picker.
when I'm trying to solve this task by external state inside kind of HOC, with using of onDayChange and trying to update selectedDays and modifiers dynamically everything becomes broken because it tries to recalculate state by props, but focus is missed and picker becomes closed. I tried to control it by controlling "showOverlay" but it looks like bad idea because I also need a native behavior like closing of datepicker by the clicking outside of input and overlay component.
Maybe you have an example of such a complex "mix" of requirements...? just tried for luck
Example: broken link on "CSS file" on https://react-day-picker-next.netlify.app/basics/styling
