UPDATE: updating showOverlay isn't enough.
Although props can be switched between true or false, it doesn't change the fact that you can't minimize with click as long as handleInputClick(e) looks like this:
key: 'handleInputClick',
value: function handleInputClick(e) {
this.showDayPicker();
if (this.props.inputProps.onClick) {
e.persist();
this.props.inputProps.onClick(e);
}
}
If you remove this.showDayPicker() from the previous function, then it won't trigger after selecting a date; you'll need to click outside (onBlur) for it to work again.
Still no solution, unfortunately...
Any help is appreciated.
FIGURED IT OUT!!!
Man... This needs to go with their next version of react-day-picker...
Check it out!
{
key: 'handleInputClick',
value: function handleInputClick(e) {
//this.showDayPicker();
if (this.props.inputProps.onClick) {
e.persist();
this.props.inputProps.onClick(e);
if (this.state.showOverlay === false) {
this.showDayPicker();
}
if (this.state.showOverlay === true) {
this.hideDayPicker();
}
}
}
}, {
key: 'handleInputFocus',
value: function handleInputFocus(e) {
var _this5 = this;
//this.showDayPicker();
// Set `overlayHasFocus` after a timeout so the overlay can be hidden when
// the input is blurred
this.inputFocusTimeout = setTimeout(function () {
_this5.overlayHasFocus = false;
}, 2);
if (this.props.inputProps.onFocus) {
e.persist();
this.props.inputProps.onFocus(e);
}
}- Commented out (or remove) this.showDayPicker() under 'handleInputFocus' and 'handleInputClick'
- Added the conditional below this.props.inputProps.onClick(e) (line 349)
Note: There's no need to update showOverlay, as hideDayPicker() and showDayPicker() already do that.
Hi! I'm using DatePicker to create a UI showing multiple months, and I was wondering if it's possible to get the month index when rendering a custom caption. The design I'm trying to implement includes the prev and next month arrows to the side of the month names, so something like
< December | January >I can add the arrows using a custom Caption element and use the public methods to manually change the months without using an external navbar element, but when I'm rendering the Caption for, say, December, I didn't find a way to know whether December is the first month being displayed or the last one. As a workaround, I'm using a custom navbar element absolutely positioned that I manually align with the captions, but I'm wondering if I'm missing something.
Uncaught TypeError: d.getTime is not a function
at clone (DateUtils.js:27)
at isDayAfter (DateUtils.js:107)
at ModifiersUtils.js:36
at Array.some (<anonymous>)
at dayMatchesModifier (ModifiersUtils.js:26)
at ModifiersUtils.js:74
at Array.reduce (<anonymous>)
at Object.getModifiersForDay (ModifiersUtils.js:72)
at Month._this.renderDay (Month.js:66)
at Array.map (<anonymous>)
at Month.js:194
at Array.map (<anonymous>)
at Month.render (Month.js:167) <DayPickerInput
formatDate={formatDate}
parseDate={parseDate}
onDayChange={this.dateChange}
placeholder={default_select_value}
dayPickerProps={{
todayButton: 'Today',
disabledDays: {
after: new Date(),
before: new Date(2019, 1, 1),
},
}}
format={['MM/DD/YYYY', 'DD-MM-YYYY']}
/>
Hi, I think the documentation is not updated especially the example section. examples/input-date-fns.js in particular.
below lines are throwing error for packages while importing.
import dateFnsFormat from 'date-fns/format';
import dateFnsParse from 'date-fns/parse';
I fixed them by importing them in below manner.
import {format} from 'date-fns;
import {parse} from 'date-fns';
I tired mimicking the concepts in here http://react-day-picker.js.org/examples/input-custom-overlay/ but no luck. Any ideas/help is much appreciated
Hello. Can anyone review the PR? @gpbl
todayButton provided with the library and create my own custom footer that displays the filter buttons: Go to Today, Past Year, Last 3 Months, This Month, and This Week. Looking for insight on how and if it's possible to tap into the libraries API outside of the context of the component.
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!