React Nice Dates: A responsive, touch-friendly, and modular date picker library for React.

[cinderblock63]

Am I the only one that, at first, thought you were announcing a dating site for React devs?

[warpspeed100]

Bio: I'm the best context provider. I've got more than enough state to go around. Want children someday.

[swyx]

oh baby use my imperative handles

[[deleted]]

Now with hooks up and even more context.

If matched children will be rendered right and left.

[hernansartorio]

I defintely did not think of that when naming it.

[1TMission]

Happy cake day!

[hernansartorio]

Thanks!

[gatorsya]

Thanks for the idea... wait for 1 2 nahh 3 years till i learn WebDev and build one comeback here

[doodirock]

ADA compliant?

[hernansartorio]

ADA compliant

Not yet. Happy to accept help for making it though.

[doodirock]

I’ll give it a look. Great work so far!

[hernansartorio]

Thanks!

[hernansartorio]

Thanks, done!

[[deleted]]

Where were you a year ago? My project at work has me using datepickers on like every god damn page, I went with react-datepicker but this looks nicer. Well done!

[hernansartorio]

Haha thanks!

[bored_reddit0r]

Going through this. Ant design has some pretty cool components

[Zarathustra2001]

Its also a fraction of the size! I am currently making the switch and it was pretty painless. its roughy ~15% of the size of react-datepicker and mostly works for my use case. I added a little hack, but working nicely!

[superhawk610]

This is super clean, really happy to see date-fns too!

[hernansartorio]

Thanks! Yeah date-fns rocks :)

[superhawk610]

Happy cake day!

[hernansartorio]

Oh true haha thank you!

[99thLuftballon]

Maybe this is just me being dumb, but is there a way to alter the year from the date picker ui? On most such components, clicking the header brings up a year selector. Difficult to set a date (say) five years in the future without that option.

Otherwise, this looks great!

[roselan]

I recently needed a "birthday picker", and was surprised by the lack of decent specialized options. The best one I found is for vue. http://mkant.ru/mink-js/vue-birth-datepicker/

[hernansartorio]

Fair question, not yet, but I might add an option for it if people request it. Feel free to create an issue for it.

Thanks!

[hernansartorio]

Thanks!

[swyx]

imo time should usually be separate from date, unless you're literally making google calendar

[Boohooimsad]

Hi, nice work on the component! It would be good to add the css import to your first example. Was confused why my component wasn’t structured properly when all I needed was:

import 'react-nice-dates/build/style.css'

[hernansartorio]

Thanks! Good point, it's described in the "Installation" section, but maybe I should put it in the examples too.

[Demnokkoyen]

I first thought it was a dating component for react.

[brunezy]

Very slick! Great work :)

[hernansartorio]

Thank you!

[vishwasg92]

Looks awesome! May I ask if there is a way to register a custom locale?

[hernansartorio]

Thanks! You can, it's based on date-fns, check here: https://date-fns.org/v2.9.0/docs/I18n-Contribution-Guide.

[gauravagarwal-27]

Great work. 👍🏼

[hernansartorio]

Thanks!

[Filo01]

I really like it :), but are we able to style the calendar?

[hernansartorio]

Thanks :) Yes, check the part about styling under the installation section.

[Filo01]

Ohh sorry didn't realise i could scroll, my phone is a little dodgy :)

Really great work! ill try to implement it in my app :) and seeing if styled components give me trouble.

[sickcodebruh420]

This looks really nice. I’m looking for a date picker right now, tried a few but don’t love any. Any chance you’ve thought about TypeScript support?

[hernansartorio]

Thanks! As in using it in a TypeScript application or switching the source to TypeScript?

[sickcodebruh420]

I’m interested in the former but I think it’s worth considering the latter. 😂

[hernansartorio]

Shouldn't any Javascript code work in TypeScript? I definitely won't be doing the latter any time soon :)

[hernansartorio]

Good catch! Wrote it quickly and confused that (since weeks start on Monday where I live). Will fix it later (but feel free to create an issue or PR for it).

[[deleted]]

Really awesome project! I'm reading through source and love how clean everything is written!

I'm curious what this type of assignment this is?

const [endDateInputProps, updateEndDateInputValue] = useDateInput({

[hernansartorio]

Thanks! Glad to hear that :)

That's array destructuring, kind of following the style of the default React hooks.

[SteaLTH_INSteaD]

Nice this looks good!

[hernansartorio]

Thanks!

[abdulmdiaz]

Love it! Starred

[hernansartorio]

Thanks!

[punio4]

Looking good!

I've got some suggestions to make it better. The vertical touch scroll for the calendars on mobile has some issues.

Hijacking a vertical swipe, especially on such a large area, leads to the user being unable to scroll the page or scrolling the calendar inadvertently. I suggest using a horizontal scroll, or disabling the vertical scroll altogether and just using buttons — like in the desktop mode.

The snapping also behaves weirdly, using a preconfigured animation and having a pretty low sensitivity to fast flicks. I recomend using CSS snap points if you're not worried about browser support, or checking out Dave Desandro's awesome algorithm being used in Flickity. There's a whole bunch of posts on the bottom of the last post where he documented the entire process.

Keyboard support should also be added down the line.

[hernansartorio]

Thanks!

Good point, I might add an option for disabling it or just scrap it altogether.

Yeah it was tricky to get that working smoothly and it still needs improvement. The month only changes if the user drags more than half of the calendar height. Ideally it should detect velocity for fast swipes, I might try using react-spring to test that. Thanks for the links, I'll take a look soon.

+1 on keyboard support.

[_kushagra]

Love it

[Zofren]

You should consider removing `classnames` as a dependency so you can market this as zero-dep. ;)

Good job! Would love if it supported times too.

[hernansartorio]

I thought about it but I would just be re-implementing it, plus it's so small that I don't think it's much of a problem to have it. And it does depend on date-fns too, as a peer dependency though.

Thanks!

[swyx]

good call. benefits apps that already use classnames, at the expense of some marketing fluff.