I built some date time pickers in my react bulma component library
https://github.com/allxsmith/bestax

Looking for some feedback. What do you like, what needs improvement.

DateInput
https://bestax.io/docs/api/form/datetime/dateinput#basic-dateinput

DateRangeInput
https://bestax.io/docs/api/form/datetime/daterangeinput#basic-daterangeinput

DateTimeInput
https://bestax.io/docs/api/form/datetime/datetimeinput#basic-datetimeinput

TimeInput
https://bestax.io/docs/api/form/datetime/timeinput#basic-timeinput

For the time selection, I implemented IOS inspired time wheels. One problem I faced: was the lack of haptic feedback APIs exposed by browsers in IOS. As a workaround, the time-wheels make a clicking sound to fake the feeling of haptics. (Android does have haptic feedback apis, no problems there)

Note: this is based off Bulma CSS, so the look and feel is opinionated.

A few details people usually ask about:

- The phone is a real photo of a hand. The listing app sits inside its screen using percentage insets (left 38.4%, right 35.6%, top 2.8%, bottom 13.2%), so it scales with the photo at every size. It swaps homes every 4.2 s, and room cards fly out to fixed spots around it.

- The mortgage is the real fixed-rate amortisation formula: loan × r / (1 − (1 + r)^−n). There's a 15/30-year switch, the price slider moves in $5k steps and the deposit runs 5–40%.

- The sliders are native range inputs, so keyboard and screen readers work for free. - With reduced motion the phone shows the first home and holds still.

Feel free to copy if it's useful: https://ui.deliverwebsite.com/components/landing-pages/real-estate-landing-page-template/

Feedback on the design is very welcome.

Free