https://github.com/lilingxi01/ams-date-picker
(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.
https://github.com/lilingxi01/ams-date-picker
component date date-picker date-selector daylight-savings modern react
Last synced: about 1 year ago
JSON representation
(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.
- Host: GitHub
- URL: https://github.com/lilingxi01/ams-date-picker
- Owner: lilingxi01
- License: mit
- Created: 2022-05-13T07:47:34.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-17T01:55:35.000Z (over 3 years ago)
- Last Synced: 2025-05-10T03:14:31.691Z (about 1 year ago)
- Topics: component, date, date-picker, date-selector, daylight-savings, modern, react
- Language: TypeScript
- Homepage: https://ams.lingxi.li
- Size: 1.8 MB
- Stars: 32
- Watchers: 7
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
 
# 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](https://github.com/lilingxi01/ams-date-picker/issues/2))
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:
```bash
npm install @ams-js/headless
```
For `yarn` user:
```bash
yarn add @ams-js/headless
```
For `pnpm` user:
```bash
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 ``.
### Single Date Input (Headless)
```tsx
import * as DatePicker from '@ams-js/headless';
export const MyDatePicker = () => {
const [dateState, setDateState] = useState(null);
return (
console.error(error)}
dateOptions={{ ... }} // You can customize as JavaScript Date options.
>
prop is allowed */}
/>
);
};
```
### Range Date Input (Headless)
```tsx
import * as DatePicker from '@ams-js/headless';
export const MyRangeDatePicker = () => {
const [firstDate, setFirstDate] = useState(null);
const [secondDate, setSecondDate] = useState(null);
return (
console.error(error)}
dateOptions={{ ... }} // You can customize as JavaScript Date options.
>
prop is allowed */}
/>
console.error(error)}
dateOptions={{ ... }} // You can customize as JavaScript Date options.
>
prop is allowed */}
/>
);
};
```
# 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](https://github.com/mbucc/320-S22-Track2/wiki/Indigo).
# Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key))!
# Credits
It was originated in project [here](https://github.com/mbucc/320-S22-Track2), but it was now separated and moved to here (keeping all old contributions from Git).
