This is a smart datetime input component that handles natural language processing to pick and set accurate dates. This component was heavily inspired by: @steventey and @dub.co
This component relies on the shadcn-ui/input component. And a node based lightweight date parsing library: chrono-node
NOTE: there is also a small accessibility concern still outstanding. The issue has to do with the tab order and how this component is actually composed. It actually uses two inputs both wired to the same state. One for the natural language processing and the other is a standard html date and time input of which we only show the icon. Although the 2nd input is mostly hidden the individual values in the input (d/m/y : hour/min/sec) are all still accepting individual tab input via the tab order.
Will need to override the natural html tab order to provide a seamless accessibility experience.
I was able to address both issues it was pretty simple to add the icon as per @BelkacemYerfa's instructions, simply defining a new icon in icons.tsx and giving it a key of what ever the domain name in the link is helps map the link to the icon pretty well from the primitive-link.tsx component.
As for the tab order issue, that was a bit more of a trade-off. The original design from the reference source. Which placed the native html datetime input second in the tab order which meant it felt unintuitive when the tab-order skipped that button. Simple fix without having to do too much of a back was to simply switch the input taborder physically. This put the icon before the input making the tab accessibility feel more natural.
https://linear.app/shadcn-extension/issue/SHA-31/smart-datetime-input
This is a smart datetime input component that handles natural language processing to pick and set accurate dates. This component was heavily inspired by: @steventey and @dub.co
This component relies on the shadcn-ui/input component. And a node based lightweight date parsing library: chrono-node
NOTE: there is also a small accessibility concern still outstanding. The issue has to do with the tab order and how this component is actually composed. It actually uses two inputs both wired to the same state. One for the natural language processing and the other is a standard html date and time input of which we only show the icon. Although the 2nd input is mostly hidden the individual values in the input (d/m/y : hour/min/sec) are all still accepting individual tab input via the tab order.
Will need to override the natural html tab order to provide a seamless accessibility experience.
Update
I was able to address both issues it was pretty simple to add the icon as per @BelkacemYerfa's instructions, simply defining a new icon in
icons.tsxand giving it a key of what ever the domain name in the link is helps map the link to the icon pretty well from theprimitive-link.tsxcomponent.As for the tab order issue, that was a bit more of a trade-off. The original design from the reference source. Which placed the native html datetime input second in the tab order which meant it felt unintuitive when the tab-order skipped that button. Simple fix without having to do too much of a back was to simply switch the input taborder physically. This put the icon before the input making the tab accessibility feel more natural.