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.

| Prop | Type | Description | | ----- | ---- | ----------- | | start | number | The starting year. Defaults to 1970 | | end | number | The ending year range. Defaults to new Date().getFullYear() | | placeholder | string | The placeholder text when select has a no value. Defaults to Select year. | | onChange | function | The callback when value changes |

MonthSelect

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

| Prop | Type | Description | | ----- | ---- | ----------- | | placeholder | string | The placeholder text when select has a no value. Defaults to Select month. | | onChange | function | The callback when value changes |

DaySelect

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

| Prop | Type | Description | | ----- | ---- | ----------- | | year | string | The year to be used as basis for the month. Useful for leap years. Defaults to new Date().getFullYear(). | | month | string (required) | The month to be used as basis for the days | | monthPlaceholder | string | The placeholder text when month is null. Defaults to Select month to proceed. | | placeholder | string | The placeholder text when select has no value. Defaults to Select day. | | onChange | function | The callback when value changes |

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