Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds Calendar Widget For Date Filter #200

Closed
wants to merge 1 commit into from

Conversation

@MPierre9
Copy link
Contributor

commented Apr 18, 2018

Adds feature from issue #181 by adding a react-datetime calendar widget to the date filters. Usage is pretty straightforward, the widget will open when the user selects either greater than, less than, or range radio buttons.

Summary

One thing to note is I needed to add three additional functions to SingleMenuItem.js because the <Datetime/> tag handles events different than a regular input API reference and returns date data in milliseconds (UNIX time) depending on the event which in this case is onBlur.

So once onBlur is triggered we attempt to parse the date and set the filterValue accordingly. This logic happens in setDate. For range values it is set a bit differently. I created two functions called setRangeStart and setRangeEnd which handle this use case. Depending on which one is set first (starting date or ending date) the function will either store the date in the dateStore state to be used by the contrasting function that will set the dates as the date range for filterValue.

Example

reactdatetime

Feedback is welcome!

@divyanshu013 divyanshu013 self-requested a review Apr 18, 2018
@divyanshu013

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2018

Hey @MPierre9, I tested this out locally. The approach looks good, however this will only work if the date is in yyyy-mm-dd format. You'll have to generate the date which is getting applied on the filter in the same format as the date field. For example you can test this in this app:

appname: gitxplore-demo
url: https://N8227VFYe:02aaf653-7f03-4e16-883d-56b494788fae@scalr.api.appbase.io

@MPierre9

This comment has been minimized.

Copy link
Contributor Author

commented Apr 21, 2018

Thanks for the review @divyanshu013 I'll try to implement your suggestion, the sample app you gave will help a lot as well. The only problem for me is figuring out how to access the date format of the data from SingleMenuItem any thoughts?

@divyanshu013

This comment has been minimized.

Copy link
Contributor

commented Apr 30, 2018

@MPierre9, you can check the Cell component in /src/js/table/Cell.js which uses a getMomentDate function from src/js/helper. Specifically, you should be able to convert the date picked by the calendar component and convert it into the date format for the given date field (using the helper function).

@siddharthlatest

This comment has been minimized.

Copy link
Member

commented May 15, 2018

@MPierre9 Let us know if you are seeing any issues after the last comment. If we can add this, it will go out in the next minor release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.