Get Started

Ams Date Picker (in code known as AmsDatePicker) is a powerful date picker component for React. It not only provides a modern look of date/time picker, but also provides a bunch of powerful features to boost the user experience while inputting a date/time.

WIP (Roadmap)

This project is still in development. It is not yet ready for use. We will release it as soon as it is ready. Stay tuned and check back soon!

Installation

For npm user:

npm install @ams-js/headless

For yarn user:

yarn add @ams-js/headless

For pnpm user:

pnpm add @ams-js/headless

Usage

For now, we only have Input component available. In the future, we will have Date Selector component and more plugins, which will also be used within <DatePicker.Root>.

Single Date Input (Headless)

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

export const MyDatePicker = () => {
  const [dateState, setDateState] = useState<Date | null>(null);
  return (
    <DatePicker.Root
      date={dateState}
      onDateChange={setDateState}
      onError={(error) => console.error(error)}
      dateOptions={{ ... }} // You can customize as JavaScript Date options.
    >
      <DatePicker.Input
        {/* Any <input> prop is allowed */}
      />
    </DatePicker.Root>
  );
};

Range Date Input (Headless)

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

export const MyRangeDatePicker = () => {
  const [firstDate, setFirstDate] = useState<Date | null>(null);
  const [secondDate, setSecondDate] = useState<Date | null>(null);
  return (
    <div>
      <DatePicker.Root
        date={firstDate}
        onDateChange={setFirstDate}
        onError={(error) => console.error(error)}
        dateOptions={{ ... }} // You can customize as JavaScript Date options.
      >
        <DatePicker.Input
          {/* Any <input> prop is allowed */}
        />
      </DatePicker.Root>
      <DatePicker.Root
        date={secondDate}
        baseDate={firstDate} // So all modifiers of the second date will be based on the first date.
        onDateChange={setSecondDate}
        onError={(error) => console.error(error)}
        dateOptions={{ ... }} // You can customize as JavaScript Date options.
      >
        <DatePicker.Input
          {/* Any <input> prop is allowed */}
        />
      </DatePicker.Root>
    </div>
  );
};

Design Prototype

FAQ

Why is this project called AmsDatePicker?

This project is called AmsDatePicker because it was born in Amherst, MA. The original group members are all coming from University of Massachusetts Amherst in Indigo Development.

Contributors ✨

Lingxi Li 🎨 💻 ⚠️

limbo-yan 💻

Thanks goes to these wonderful people (emoji key)!

Credits

It was originated in project here, but it was now separated and moved to here (keeping all old contributions from Git).