react-flex-picker

For online demo go to https://unbugx.github.io/react-flex-picker/

To run demo on your own computer:

• Clone this repository
• npm install
• npm run storybook
• Open http://localhost:9002/

Getting Started

npm install --save react-flex-picker

Add the following import to your application if you use Webpack with CSS loader:

import 'react-flex-picker/dist/react-flex-picker.css';

Make own datepickers

Using a few simple components you can build your own calendar with any logic you want. Just import these components:

import {PickerProvider, PickerConsumer, DayPickerController, MonthPickerController} from 'react-flex-picker';

PickerProvider

This picker based on React Context Api. It creates provider that keeps all business logic and all data to control calendar. PickerProvider has following list of properties:

|name|type|description| |---|---|---| |initialEndDate|Moment|Initial end date in range for range picker. Ignore for single picker.| |initialStartDate|Moment|Initial start date in range for range picker. Also it is used as initial date for single picker.| |isSingle|boolean|Switch to single picker.| |isWeeksSelection|boolean|Switch to weeks selection.| |locale|string|Current locale. Default value: en| |maxDate|Moment|Maximum available date for choosing. All dates after maximum date will be disabled.| |maxDaysCount|number|Maximum number of days in range.| |minDate|Moment|Minimum available date for choosing. All dates before minimum date will be disabled.| |minDaysCount|number|Minimum number of days in range.| |onChangeWidth|function|Executes when picker width was changed. Sometimes this info can be useful when you build your own calendar.| |onDatesChange|function(startDate: Moment, endDate: Moment)|Executes when new date is picked up.| |onTitleClick|function|Executes when calendar title is clicked.| |pickerType|string|PickerProvider has to know what type of picker it controls. Available values are day, month. Default value: day| |showOutsideDays|boolean|First and last week of month will be filled with days from nearby months.| |styles|object|Object with class names to override current css styles.| |unitCount|number|Number of months for DayPickerController and number of years for MonthPickerController visible at a time. Default value: 1|

PickerConsumer

Works as common consumer in context api. It takes function as child that has one arguments with set of useful properties. The most useful properties are handlePrevUnit and handleNextUnit to switch months or years.

import * as React from 'react';
import {PickerProvider, PickerConsumer, DayPickerController} from 'react-flex-picker';
import * as moment from 'moment';

<PickerProvider
  initialStartDate={moment().add(-7, 'day')}
  onDatesChange={(startDate) => {console.log(startDate)}}
  isSingle
>
  <PickerConsumer>
    {({handlePrevUnit, handleNextUnit}) => (
      <div className='calendar'}>
        <div className='right' onClick={handleNextUnit}>&rarr;</div>
        <div className='left' onClick={handlePrevUnit}>&larr;</div>
        <DayPickerController />
      </div>
    )}
  </PickerConsumer>
</PickerProvider>  

DayPickerController and MonthPickerController

Widgets of day picker and month picker accordingly.

Overriding styles

Here it's supposed you use webpack and css-loader. Css-loader allows you import styles as object with classes in keys:

import * as styles from '../styles.styl';
console.log(styles);

It will print out object like this:

{
  day: "customCalendarStyles___day"
  dayClickable: "customCalendarStyles___dayClickable"
  dayFirstSelected: "customCalendarStyles___dayFirstSelected"
  dayHovered: "customCalendarStyles___dayHovered"
}

Where key is class name in styles.styl file and value is dynamic class name generated by css-loader that will be inserted in resulting html.

To override existing styles just pass styles property to PickerProvider. Look at example below:

// calendar.styl

.wrapper {
  background: #29323f;
  overflow: hidden;
  display: inline-block;
  user-select: none;
  font-family: 'Courier', sans-serif;

  > div {
    white-space: nowrap;
  }
}

.month {
  margin: 0 10px;
  width: 280px;
  display: inline-block;
  vertical-align: top;
  white-space: normal;

  .day {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border: 2px solid #29323f;
    color: #fff;
    border-radius: 50%;
  }

  .headerMonth {
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    width: 100%;
    cursor: default;
    color: #fcee6d;
  }

  .headerWeekDays {
    border-bottom: 1px grey solid;

    span {
      display: inline-block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      cursor: default;
      color: #999;
    }
  }

  .dayClickable:hover {
    border-color: #e7d84f;
  }

  .dayFirstSelected, .dayLastSelected {
    border-color: #e7d84f;
    background: #e7d84f !important;
    color: #29323f;
    font-weight: bold;
  }

  .daySelected, .dayHovered {
    border-color: #e7d84f;
    background: #29323f;
  }
}

import * as React from 'react';
import {PickerProvider, PickerConsumer, DayPickerController} from 'react-flex-picker';
import * as moment from 'moment';

import * as styles from './calendar.styl';

<PickerProvider
  onDatesChange={() => {}}
  styles={customStyles}
>
  <PickerConsumer>
    {({handlePrevUnit, handleNextUnit}) => (
      <div className='calendar'>
        <div className='right' onClick={handleNextUnit}>&rarr;</div>
        <div className='left' onClick={handlePrevUnit}>&larr;</div>
        <DayPickerController />
      </div>
    )}
  </PickerConsumer>
</PickerProvider>

Below list of all available class that can be overridden:

wrapper, transition, day, dayDisabled, dayOff, daySelected, dayFirstSelected, dayLastSelected, dayClickable, dayHovered, month, headerMonthWrapper, headerMonth, headerClickable, headerWeekDays, daysWeek, year, headerYear.

Examples

For more examples go to https://unbugx.github.io/react-flex-picker/ and source code of storybook examples https://github.com/unbugx/react-flex-picker/tree/master/src/stories

Below a few more interested examples.

Date presets and Apply button

import * as React from 'react';
import {PickerProvider, PickerConsumer, DayPickerController} from 'react-flex-picker';
import * as moment from 'moment';
import * as styles from './styles.styl'; // here is should be your own file with css

const today = moment();
const yesterday = moment().add(-1, 'day');
const nextMonthStart = moment().add(1, 'month').startOf('month');
const nextMonthEnd = moment().add(1, 'month').endOf('month');
    
class CalendarWithPresets extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      initialStartDate: moment().add(-7, 'day'),
      initialEndDate: moment(),
      selectedStartDate: moment().add(-7, 'day'),
      selectedEndDate: moment(),
    };

    this.handlePreset = this.handlePreset.bind(this);
    this.handleDatesChange = this.handleDatesChange.bind(this);
    this.handleApply = this.handleApply.bind(this);
  }

  handlePreset(newStartDate, newEndDate) {
    this.setState({
      initialStartDate: newStartDate,
      initialEndDate: newEndDate,
      selectedStartDate: newStartDate,
      selectedEndDate: newEndDate,
    });
  }

  handleDatesChange(selectedStartDate, selectedEndDate) {
    this.setState({selectedStartDate, selectedEndDate});
  }

  handleApply() {
    if (this.state.selectedStartDate && this.state.selectedEndDate) {
      // you can execute any callback here to pass selected data and hide calendar
      console.log(this.state.selectedStartDate.format('DD.MM.YYYY'), this.state.selectedEndDate.format('DD.MM.YYYY'));
    }
  }

  render() {    
    return (
      <PickerProvider
        onDatesChange={this.handleDatesChange}
        unitCount={3}
        showOutsideDays
        initialStartDate={this.state.initialStartDate}
        initialEndDate={this.state.initialEndDate}
      >
        <PickerConsumer>
          {({handlePrevUnit, handleNextUnit}) => (
            <div className={styles.calendar}>
              <div className={styles.right} onClick={handleNextUnit}>&rarr;</div>
              <div className={styles.left} onClick={handlePrevUnit}>&larr;</div>
              <DayPickerController />
              <div>
                <button
                  onClick={() => this.handlePreset(today, today)}
                >
                  Today
                </button>
                <button
                  onClick={() => this.handlePreset(yesterday, yesterday)}
                >
                  Yesterday
                </button>
                <button
                  onClick={() => this.handlePreset(nextMonthStart, nextMonthEnd)}
                >
                  Next month
                </button>

                <button onClick={this.handleApply}>Apply</button>
              </div>
            </div>
          )}
        </PickerConsumer>
      </PickerProvider>
    );
  }
}

More examples are coming soon...