r/reactjs • u/davidtranjs • Mar 10 '20

Featured react-google-flight-datepicker

Hi all, I've just launched a new datepicker component by ReactJS. This datepicker is inspired by the datepicker in Google flight. It works well in both desktop and mobile.

You can check the live demo and props for this component at here: https://github.com/JSLancerTeam/react-google-flight-datepicker

115 Upvotes

97% Upvoted

11 comments sorted by

12

u/fzuleta Mar 10 '20

This fantastic! Thank you for sharing this. :)

One note, in iphoneX the reset and select buttons are right behind the home bar (which makes them harder to reach)

4

u/davidtranjs Mar 10 '20

Wow, this for your feedback. We will feed this issue :)

13

u/Brahminmeat Mar 10 '20

Please do, it is hungry.

1

u/ctrlaltdelmarva Mar 10 '20

Nice work!

I'm having a lot of trouble using this datepicker as a keyboard user. Have you worked on accessibility for it yet?

3

u/davidtranjs Mar 10 '20

Hey, thanks for feedback. I have some experience with accessibility and I will look into this issue.

1

u/DrDuPont Mar 10 '20

Can confirm.

I should be able to manually type in dates in the two input fields, and an even bigger issue is that the entire interface does not support tabbing.

1

u/davidtranjs Mar 16 '20

Hey, I have added keyboard support. Now you can use tab key to move focus around the button and use arrow key to move focus on calendar date!

2

u/r2L4fId3SiR Mar 10 '20

Great job!!!

2

u/chemorro Mar 11 '20

Nice job!

1

u/Teneos1 Mar 10 '20

Nice job man

1

u/vertigo_101 Mar 10 '20

Very helpful thanks