where showCalendar is a boolean state controlled by another function with onClick
and did this on line 343 (../node_modules/react-day-picker/lib/src/DayPickerInput.js):
key: 'handleInputClick',
value: function handleInputClick(e) {
console.log(this.state.showOverlay);
if (this.props.inputProps.onClick) {
e.persist();
this.props.inputProps.onClick(e);
}
if (e.target.tagName === "INPUT") {
if (this.state.showOverlay === false) {
this.showDayPicker();
}
if (this.state.showOverlay === true) {
this.hideDayPicker();
}
}
}
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.
