Skip to content

(WIP) Ams Date Picker - A modern, magical, and unstyled date picker for React. We have your favorite Time Machine and Input Supercharge out-of-box.

License

Notifications You must be signed in to change notification settings

lilingxi01/ams-date-picker

Repository files navigation

AmsDatePicker Cover

WIP WIP

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

Date Picker Prototype

Date Selector Prototype

Date Conflict Resolver

Date Picker User Manual

Dark Mode Support

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).

About

(WIP) Ams Date Picker - A modern, magical, and unstyled date picker for React. We have your favorite Time Machine and Input Supercharge out-of-box.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Languages