@srph/react-date-select v0.1.1

React Date Select

Generic select elements for dates - year, month, and day.

View demo / View examples

Installation

npm i @srph/react-date-select --save

Script tags

If you're not using a bundler like Browserify or Webpack, simply add the script tag after your React script tag.

<!-- Script tags for React and other libraries -->
<script src="https://unpkg.com/@srph/react-date-select/dist/react-date-select.min.js"></script>

This library is exposed as ReactDateSelect (e.g., ReactDateSelect.YearSelect, ReactDateSelect.MonthSelect, ReactDateSelect.DaySelect).

Usage

import React from 'react';
import {YearSelect, MonthSelect, DaySelect} from '@srph/react-date-select';

class App extends React.Component {
  state = {
    y: 0,
    m: 0,
    d: 0
  }

  render() {
    const {y, m, d} = this.state;

    return (
      <div>
        <YearSelect value={y} onChange={this.handleYearChange} />
        <MonthSelect value={m} onChange={this.handleMonthChange} />
        <DaySelect month={m} value={d} onChange={this.handleDayChange} />
      </div>
    );
  }

  handleYearChange = (value) => {
    this.setState({ y: value });
  }

  handleMonthChange = (value) => {
    this.setState({ m: value });
  }

  handleDayChange = (value) => {
    this.setState({ d: value });
  }
}

Checkout the examples.

API Documentation

Here's a list of props you may use to customize the component for your use-case:

YearSelect

All other props are passed down to the select element as usual.

MonthSelect

All other props are passed down to the select element as usual.

DaySelect

All other props are passed down to the select element as usual.

Setup

You can check the demo, or build it yourself locally:

npm install
npm run start

Bundling package

npm run bundle

Publish storybook

npm run storybook:publish