search

secretyouth / react-datez

An easy to use, customizable mobile-friendly datepicker.
MIT License
126 stars 24 forks source link

Change what date 'jumpToToday' button brings you to #42

Open hasen011 opened 5 years ago

hasen011 commented 5 years ago

Hi, thanks for the component!

I have a question, in your example the Standard date picker looks really awesome, when I put it to my page it looks like this image Everything else works great. Is there some css I can include or do I have to style it myself?

Also, the 'go to today's date' button is swapped with the date selector button (the two arrows) in the dropdown. Is there a prop for that?

My actual question though - Is there a way to change what date the today's date button in the picker brings you to? For example, yesterday's date?

Thanks.

EDIT: Found this issue, when I do setState outside of the handleChange prop, the value updates correctly but the actual date selected in the picker doesn't. (I need to do this to keep my url in sync with the date picker) Is this an actual bug?

image

secretyouth commented 5 years ago

You need to make sure you include the required stylesheet in the package: `@import 'react-datez/dist/css/react-datez.css';

Judging by your comment, it would be a race condition. I would ensure you use the callback method on setState({ ...state }, () => this.nextFunction() ) to avoid any issues with execution.

hasen011 commented 5 years ago

Thanks for your response. I will try to fix the style. About the race condition though, maybe this screenshot is a better example. image

I am using the calendar as a controlled component and setting the calendar's value (to a value I get from props) and it is correctly displayed in the calendar's input box but it is not getting highlighted after opening the calendar. If I switch to a different date directly in the calendar then it works just fine.

It at least brings me to the correct month by setting the default month. This is how I am using it: <ReactDatez name="dateInput" allowPast={true} startDate={moment("01-01-1900", "MM-DD-YYYY").format()} endDate={moment("06-06-2079", "MM-DD-YYYY").format()} dateFormat="MM/DD/YYYY" placeholder="MM/DD/YYYY" handleChange={this.handleChange} value={dateToString(this.props.date)} defaultMonth={dateToString(this.props.date)} />

Lastly, any chance I can set the today's date to yesterday's date?

Thanks a lot!!