Custom Date Selector (250,000 Sat Bounty)

[ghost]

Is your feature request related to a problem? Please describe.
The tools for filtering content by date on Stacker News are limited, and do not allow people to fully customize their date parameters for top stackers, posts, on user profiles, or on the search page.

Describe the solution you'd like
In addition to the existing date filters that allow one to filter by day, week, month, year, or forever, there should be tools that allows anyone to insert custom date parameters to find content on any given date/dates.

People should be able to search for content on a given day, week, month, or year with the ability to scroll between previous periods at the click of a button. This is similar to how Plausible allows anyone to segment their site traffic by various custom date options.

This would enable more robust leaderboards and improve access to historical content on SN.

Additional context
For the completion of this feature, Stacker News is offering a 250,000 sat bounty.

[huumn]

Hints:

• backend queries will need to change:
  • /api/resolvers/search.js (in search resolver) ... this is an OpenSearch query
  • /api/resolvers/item.js (items resolver) ... this is a few sql queries
• this'll require a date range picker on the frontend (tricky and tedious part)
• graphql queries will need to be modified to take date ranges (relaxing part)

[SuperAtic]

Have been playing around a bit, but I'll be definitely not able to build/code the functionality. Not sure I understand it properly... @kerooke you'd need something like this?
👇

1. Select Custom

2. Select Custom Date-Range

3. Visualize selected Date-Range as current option on the select input

The date-picked design is obviously just an example. @huumn there's also libraries (like this) you can might use?

Hope it helps, and happy to make some changes to the mockup if needed

[brihuang99]

Have been playing around a bit, but I'll be definitely not able to build/code the functionality. Not sure I understand it properly... @kerooke you'd need something like this?
👇

1. Select Custom

2. Select Custom Date-Range

3. Visualize selected Date-Range as current option on the select input

The date-picked design is obviously just an example. @huumn there's also libraries (like this) you can might use?

Hope it helps, and happy to make some changes to the mockup if needed

I think we might need two calendar inputs for a Start Date and an End Date to give users a greater control over the time range they're searching, unless the calendar component can support selecting a range already. It'll probably depend on whatever library we use.

[SuperAtic]

I think we might need two calendar inputs for a Start Date and an End Date to give users a greater control over the time range they're searching, unless the calendar component can support selecting a range already. It'll probably depend on whatever library we use.

Yes correct, that's why I place 14-16 Aug in the select menu after the two dates are selected. This below could be the view when both dates are selected

Another example could be 23 Aug 2021 - 22 Aug 2022.

[huumn]

I imagine we can find a FOSS component that allows this kind of range selection within a single calendar overlay. The linked date picker does this: https://reactdatepicker.com/#example-date-range-for-one-datepicker

[SuperAtic]

Yes correct, I shared a link above. I believe there's existing libraries you can use for this common components

https://www.npmjs.com/package/react-datepicker

[SatsAllDay]

Is this issue fully resolved by #494, or is there more remaining?

[huumn]

More! We want it to exist for all pages where we do time based filtering, e.g. top, growth, and profile pages

[rleed]

I am just now circling back to work on this. I should have status early next week...

[rleed]

Virtually done, but I'm stuck on a couple of points... if someone could jump over to the PR and take a look at my two questions on the code, I would much appreciate it.

[ekzyis]

I'll try to take a look at #567 tomorrow :)