Skip to content

blueberryapps/react-day-picker-radium

 
 

Repository files navigation

title

screen shot

react-day-picker with Radium styles

react-day-picker is a flexible date picker component for React.

Check out the examples to see its features.

npm version Bower build status coveralls Code Climate npm downloads

Quick start

Add the dependency to your project

npm install react-day-picker --save

# or with yarn:
yarn add react-day-picker

Using unpkg

Include the component without installing:

<script src="https://unpkg.com/react-day-picker/daypicker.min.js"></script>

See this jsfiddle as example.

Using bower

bower install react-day-picker

Example

import React from 'react';
import DayPicker from "react-day-picker";

import "react-day-picker/lib/style.css"

function sundays(day) {
  return day.getDay() === 0;
}

function today() {
  return new Date();
}

class MyComponent extends React.Component {
  state = {
    selectedDay: today(),
  }
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
  }
  handleDayClick(day, { disabled, selected }) {
    if (disabled) {
      return;
    }
    this.setState({
      selectedDay: selected ? null : day
    })
  },
  render() {
    return (
      <DayPicker
        initialMonth={ new Date(2017, 1) }
        disabledDays={ sundays }
        selectedDays={ this.state.selectedDay }
        onDayClick={ this.handleDayClick }
    />);
  }
}

See Basic usage for a deeper explanation of the example above.

Docs and examples

Get support

Contribute

  • File bugs and feature requests in the issues page
  • Check out the source code on Github
  • Pull requests are welcome! If you are planning a pull request with lot of changes, please add an issue to discuss your idea first
    • See how to start the project locally here

Packages

No packages published

Languages

  • JavaScript 98.6%
  • CSS 1.4%