Hi Everyone I'm newer to react so this question should be both easy and embarrassing. I can't figure out how to get the state from the react-day-picker into a parent component.
This is what I wrote to try, but it's not working. Likely it's a lack of familiarity with the tools.
class datePicker extends Component {
constructor(props){
super(props)
this.handleDayChange = this.handleDayChange.bind(this)
this.state = {
selectedDay: '',
}
}
handleDayChange(day, { selected }) {
this.setState({ selectedDay: day });
}
componentDidUpdate(prevProps){
if(this.prevProps.selectedDay !== this.state.selectedDay){
this.props.handleDate(this.state);
}
}
render() {
return (
<DayPickerInput onDayChange={this.handleDayChange} />
)
}
}componentDidUpdate was use it to see that the this.state.selectedDay changed when compared to the default state I set in the parent component which was also set to selectedDay = '' and so I tried to do a comparison check via that lifecycle component between this.state.selectedDay and this.props.selectedDay
Hello, my name is Liora and I am currently hunting open source projects for company NeuraLegion (www.neuralegion.com)
We just launched a free annual subscription for open source projects for our AIAST tool NexPloit.
If you are interested, please, reach us on opensource@neuralegion.com!
Thank you for your time and consideration! If you have any questions, please do not hesitate to contact us!
Best!
<DayPicker /> when a user presses the "down" or "up" arrow key on their keyboard while focused on the calendar? I have some users who use the keyboard to scroll up/down on the page and they're really confused by this feature. Thanks in advance for any help!
canChangeMonth={false} in the props... I think that will stop the arrow keys for the year change... although it will probably affect the changing of the month too - I've never tried that prop. If you didn't do that you'd have to get in and stop the key events from propagating up to the layer just below the container... You could potentially stop that using the renderMonths renderNav methods but it doesn't sound easy
firstDayOfWeek={1} isn't working that sounds like a bug. For selecting multiple weeks, following the example should work fine except you'd need to set a separate range based on your date. I expect you'd just need to tinker with the getWeekRange method in that example to do what you want
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)