v0.0.5
A modern, magical, and headless date picker for React.
This project is still a work in progress.

Date picker has never been modern and magical like this.

The most modern, efficient, and intuitive way to select the date and time.
Now, let's re-imagine the date picker in your tech stack.
@ams-js/headless
Use npm, yarn, pnpm, or the one you like.
Time Machine
Flash into the moment you need, fast.
Ideas in your mind may not be specific dates at all time. They usually are a rough idea like "yesterday 9pm" or "10 minutes ago". With Ams Date Picker, you are able to directly use these information – you don't have to convert them anymore.
Yesterday 9:30 PM
Input Supercharge
Break the rules, move in lightspeed.
We all hate doing useless works, but we barely evolved our date picker, which requires us to input all redundant information everytime. With Ams Date Picker, you are able to eliminate unnecessary information and focus only on the important one.
August 1st at 1 PM
Computational Duration
Computing a future? A past.
Do you feel tired when you want to select a duration and you have to compute the end time yourself? With Ams Date Picker, you are able to directly input the duration, and we will do the computation task for you. Computing the end time will be the past forever.
186 min. duration
Modern Selector (Coming soon)
Prefer classic? Make it a modern one!
You don't really like this game-changing date picker? No problem! We will never try to change your habit. With Ams Date Picker, you still have the classic GUI date selector and it feels even smoother after we fine-tuned it. It now becomes a modern one.
Composable & Unstyled
The best one should always be brand-less.
That means – you have the full control over how it looks and how it feels. From now on, you don't need to worry about being styled by another company – your user will love it so much because it will be as same as your other components. (But, we will also have a well-designed, styled version coming soon.)
Try it yourself
Please press enter/return after typing~
Run it yourself

import * as DatePicker from '@ams-js/headless';

<DatePicker.Root
  date={...}
  baseDate={...}
  onDateChange={(date: Date) => {...}}
>
  <DatePicker.Input
    placeholder={'...'}
  />
  {/* More composable modules coming soon */}
</DatePicker.Root>
@ams-js/headless
Use npm, yarn, pnpm, or the one you like.
Want to contribute or report an issue?
lilingxi01/ams-date-picker
Crafted byLingxi Liand all lovely contributors.