Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 08 15:32
    stopr29 commented #1496
  • Aug 08 11:10
    gpbl opened #1497
  • Aug 08 11:10

    gpbl on master

    Add prefix to auto generated id… (compare)

  • Aug 08 11:10
    gpbl closed #1493
  • Aug 08 11:09
    gpbl edited #1493
  • Aug 08 11:08

    gpbl on upgrade-dependencies

    Upgrade dependencies to latest (compare)

  • Aug 08 08:26
    apdrsn edited #1496
  • Aug 08 08:25
    apdrsn edited #1496
  • Aug 08 08:23
    apdrsn labeled #1496
  • Aug 08 08:23
    apdrsn opened #1496
  • Aug 05 19:26
    stopr29 edited #1495
  • Aug 05 12:33
    stopr29 opened #1495
  • Aug 04 20:50
    McSam27 commented #1468
  • Aug 04 19:10
    McSam27 commented #1486
  • Aug 03 12:01
    mihkeleidast opened #1493
  • Aug 01 23:29

    gpbl on master

    Upgrade dependencies (#1485) (compare)

  • Aug 01 23:29

    gpbl on sandpack-dep-upgrade

    (compare)

  • Aug 01 23:29
    gpbl closed #1485
  • Aug 01 15:37
    gpbl synchronize #1485
  • Aug 01 15:37

    gpbl on sandpack-dep-upgrade

    Rename returned type (compare)

METWebServer
@METWebServer
That seems like a pretty smart solution. Thanks for your input.
I have a more complex question to ask now regarding showOverlay
how can I define whether the overlay shows or not
I tried adding the property showOverlay={this.showCalendar}
where showCalendar is a boolean state controlled by another function with onClick
METWebServer
@METWebServer
but it won't do anything...
so... I decided to play with node_modules again

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();
}
}
}

I got it to work half-way... The first time I click it, it blinks (showDayPicker, then hideDayPicker), then it works fine as long as you don't click somewhere else
so... I'm thinking that there should be a proper way to update showOverlay without going crazy with node_modules
METWebServer
@METWebServer
Can anyone help?
METWebServer
@METWebServer

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.

METWebServer
@METWebServer

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);
  }
}
  1. Commented out (or remove) this.showDayPicker() under 'handleInputFocus' and 'handleInputClick'
  2. 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.
Xiaoxue CHEN
@ca7erina
image.png
can anyone show me how to call hideDayPicker() from overlay component?
johnjessewood
@johnjesse
@ca7erina hideDayPicker is a method on the DatePickerInput, you could place a ref on it and then pass that ref to your custom overlay component in order to call the instance methods, see https://codesandbox.io/s/q38qrw678w
Julio Olivera
@julioolvr

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.

vinay
@vinay0458
Can anyone help me how can i use daypicker (switch between years and months) from daypickerinput?
Moogi
@moogambigai
Hi there , if we change the Date format , the selectedDay is not highlighted on the DatePicker. We found it only accepts the value format "yyyy-mm-dd". Is there a proper way to change the date format ?
Prashant Rajoriya
@prashant-rajoriya
Hey, anyone knows how to add css to selected date ?
I want to make selected date different from normal days css.
Mitch Rivet
@MitchRivet
hi, first of all thanks for the lib. very nice. i'm wondering if there is a plan for next release/bug fixes.
Vicente Carrillo
@Vicentecarrillo
hi, I'm running into an issue using the DayPickerInput with disabledDays. I get an error when I try to use the before/after object to disable dates before and after certain dates
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']}
            />
Vicente Carrillo
@Vicentecarrillo
in the debugger it's showing the Date object I pass in as a DateComponent.. ?
Vicente Carrillo
@Vicentecarrillo
nvm, mistakenly was importing another component that was overriding the Date class :/
Dries Decramer
@driesd
Hi, I'm using the overlayComponent prop and everything works fine. Until I click somewhere inside the overlay, then it closes.
Anyone also facing this issue?
zilmasarjuna
@zilmasarjuna
Hi.. Firefox
Alexander Nyan
@Alexander_Nyan_twitter
hi, can i close overlay if i inputted valid date and pressed "enter" with DayPickerInput?
i tried, but unfortunately, i didn't succeed
Dhruv Soni
@Dhruv56

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';

k1ker
@k1ker
Is there a way to turn off localization?
k1ker
@k1ker
How to make 12 hours datePicker?
zzuber
@zzuber
Hi there. Just started using Date Picker and have basics working . I'm trying to build this http://react-day-picker.js.org/examples/elements-year-navigation/ but I want it to display in the overlay on click.
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
zzuber
@zzuber
@gpbl any idea on this ^
zzuber
@zzuber
Ava Guerrero
@iamacatperson
hello, i am having an issue where when using DatePickerInput with the ability to switch between months/years, the month/year dropdown do not seem to work on iOS browsers
i forked a similar issue last time (i saw from github): https://codesandbox.io/s/0y84wrp8mn .. and try opening this on an iOS browser. clicking on the dropdown doesn't show the selection..
Reda
@Reda_bex_twitter
hey everyone any idea on how I can use Hooks inside a renderDay custom component?
Ghost
@ghost~58e977ced73408ce4f57112b

Hello. Can anyone review the PR? @gpbl

gpbl/react-day-picker#890

chenrico
@chenrico
Hello is there a way to assign name attribute to the input tag inside the input container?
Ghost
@ghost~58e977ced73408ce4f57112b
Corey Bruyere
@coreybruyere
Has anyone had success with building their own custom footer filters to filter dates? I'm looking to not use the 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.
Victor Chan
@fivetwelve
Hi, there. I came across a weird date rendering issue that I'm having trouble figuring out. I have an instance on my dev site, built with Gatsby on Netlify where my modifiers logic appears to work (I logged the actual true/false values) but the style is applied to the wrong date. If I subsequently advance or retreat a month, causing a refresh, the styles are applied correctly! Oddly enough, I tried to reproduce it in Codesandbox to no avail. Anyone interested in taking a quick look? My dev site: https://dev--ag-poc.netlify.com/northamerica/en/events and codesandbox barebones with same modifiers logic: https://codesandbox.io/s/km9o3zq2x7
Victor Chan
@fivetwelve
In my dev example a number of dates are circled to show what dates match against a list of event days. They're all affected but the easiest to discern are the April 17th, 24th and May 1st. The first two should be highlighted but aren't until a re-render happens. The third is only highlighted due to an overlapping event. But the corresponding error dates on 18th and 2nd disappear with the re-render. You can see the dates I've replicated in the Codesandbox source. When I run it in Codesandbox, the underlined dates display correctly but I'm not really sure how to diagnose my dev issue when there aren't any errors from the build. Even though Gatsby is a static site generator and the site gets built remotely could either of those two factors cause dates to be improperly calculated. I'm under the impression that all my evaluation is done at client side. I'm using DateUtiles.isDayInRange and the Date() constructor to do all my comparisons.
Shivam Parashar
@para27rsh_twitter

Please someone help me in this,
i imported

import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";

but the CSS is not working why ??

does anyone faced the same issue .. please help me in this ?
Shivam Parashar
@para27rsh_twitter
hello is anyone there ?
Shivam Parashar
@para27rsh_twitter
@gpbl r u there bro