What should I use for creating an Input & DatePicker in the same field?

[deadcoder0904]

If you've used Things for Mac, you've seen the autocompletion time input that looks like:

I want to create something similar. It will have 1 input field where I can type in 2 hours & it will show the time below like the above pic.

I also want to make it show datepicker below the timebox like below February 12 & in 12 days.

Timebox on top (if I'm typing a nlp input) & Datepicker on bottom.

Which components should I use? This looks like Combobox & Datepicker but Combobox doesn't have arrow button & idk if the list of items can keep changing like from a client-side api so curious?

[LFDanLu]

The above input experience looks like it fits SearchAutocomplete, of which the component and its accompanying aria hook are still in alpha so we don't quite have docs for them yet and the api is subject to more possible change. I'm unfamiliar with "Things for Mac", what would clicking on those options do? Does it just fill out the field with the text value or would it open a Datepicker modal? As for the list of items, you can have full control over what is shown via the items prop as opposed to using the defaultItems prop (similar to inputValue vs defaultInputValue in how it is controlled vs not controlled) so if you had a client side api sourcing your items to show you can just pass it to the hook via the items prop

[deadcoder0904]

I'm unfamiliar with "Things for Mac", what would clicking on those options do? Does it just fill out the field with the text value or would it open a Datepicker modal?

it fills out the field. i probably incorrectly said earlier that it shows up on the date picker but date picker goes hidden when i type natural language like in 2 hours, bcz then it shows what u see in the image above.

@devongovett i think i'll go with 1 possible date format that is global ,i.e, dd/mm/yyyy or maybe use sherlock.js although i would love to use what superhuman uses but i guess it's not open-source & mac probably has it's own nlp api.

i'll give it a shot & will let u know if it works out :)

[deadcoder0904]

@LFDanLu @devongovett what type of combobox should i use? there are many different ones but my use case is a little weird.

i won't know what list would be until a user types something in & so when a user types something in, it will be contextually generated. do i need to use asynchronous loading combobox?

also, regarding datepicker, is there a similar codesandbox of examples using tailwind & react-aria bcz i want to style it a/c to my design & its in alpha so idk if there's any available.

[LFDanLu]

@deadcoder0904 You can probably model yours based off the sandbox example @devongovett linked above (aka the SearchAutocomplete component, the bottom most input in the browser preview). As for the list of items, where would you be sourcing/filtering the results when a user types something? Via an api call? Or do you have a list available at the start that you need to filter? If it is from an api call then yeah you'll need to load the items asynchronously. I'll defer the last question to Devon

[deadcoder0904]

@LFDanLu no, i don't have an api for that. everything is client-side. either i'm gonna use https://compromise.cool (see https://github.com/spencermountain/compromise/tree/master/plugins/dates) or https://sherlock.neil.gg/ (see https://github.com/neilgupta/Sherlock) & the problem is with both these libraries is none of them returns a list of possible values as i see in things for mac. so i don't think i would be able to use typeahead using nlp.

i might have to write my own thing it seems :(

[deadcoder0904]

or i will probably use compromise to show only 1 item in combobox. now the question is should i use combobox for that or something else? if so, which combobox?

for example, if i type 1 hour, it will show a combobox option with just 1 item 12:30 am & on empty input, i want datepicker to show automatically on focus probably using trigger prop.