https://github.com/whitphx/react-ymd-date-select

Hooks and components for Y-M-D dropdowns with React
https://github.com/whitphx/react-ymd-date-select

date date-picker datepicker dropdown hacktoberfest javascript react react-component react-components react-hooks reactjs selectbox

Last synced: 9 months ago
JSON representation

Hooks and components for Y-M-D dropdowns with React

• Host: GitHub
• URL: https://github.com/whitphx/react-ymd-date-select
• Owner: whitphx
• License: mit
• Created: 2022-03-19T14:01:04.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-09T07:44:31.000Z (over 3 years ago)
• Last Synced: 2024-12-28T07:42:05.332Z (over 1 year ago)
• Topics: date, date-picker, datepicker, dropdown, hacktoberfest, javascript, react, react-component, react-components, react-hooks, reactjs, selectbox
• Language: TypeScript
• Homepage: https://whitphx.github.io/react-ymd-date-select/
• Size: 2.7 MB
• Stars: 45
• Watchers: 2
• Forks: 6
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-ymd-date-select

[![Test and Build](https://github.com/whitphx/react-ymd-date-select/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/whitphx/react-ymd-date-select/actions/workflows/main.yml)

![npm](https://img.shields.io/npm/v/react-ymd-date-select)

![npm bundle size](https://img.shields.io/bundlephobia/min/react-ymd-date-select)

![NPM](https://img.shields.io/npm/l/react-ymd-date-select)

Hooks and components for Y-M-D dropdowns with React. **[Demo](https://whitphx.github.io/react-ymd-date-select/)**

![](./docs/img/samplepic.png)

The Y-M-D dropdown UI is sometimes preferable to calendar widgets, e.g. birth date selection.

Building Y-M-D looks simple, but actually, there are some nuts;

- Generating the arrays of year, month, and day numbers and strings.

- Validating combinations of the Y-M-D values.

- Combining the 3 values from the dropdowns into one date value, and integrating it with the form component state.

This library manages these things.

## Installation

With npm:

```shell

npm install react-ymd-date-select

```

With Yarn:

```shell

yarn add react-ymd-date-select

```

## API & Samples

Please see [**the demo page**](https://whitphx.github.io/react-ymd-date-select/) for the guide and samples.

## Support the project

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/D1D2ERWFG)



[![GitHub Sponsors](https://img.shields.io/github/sponsors/whitphx?label=Sponsor%20me%20on%20GitHub%20Sponsors&style=social)](https://github.com/sponsors/whitphx)