react-dates-range-picker

Small, stateless date / date range picker based on sweet DayPicker from react-dates by @airbnb.

Github星跟蹤圖


Build Status
Code Coverage
Code Style

Small, stateless date / date range picker based on sweet { DayPicker } from react-dates by @airbnb.

We all know react-dates. I love this lib! But there are cases, you want to select a date range without the predefined Start Date and End Date input. I want to make this easier for you!

For warriors: check out DayPickerRangeController.

TL;DR; Demo

https://react-date-range-picker.now.sh/

Installation

yarn add react-dates-range-picker react-addons-shallow-compare

// or

npm install react-dates-range-picker react-addons-shallow-compare

react-addons-shallow-compare is required by react-dates.

Usage

First, you have to import the component

  import DatePicker from 'react-dates-range-picker';

Now all you have to do is set up some props. Let's start from date range.

export default MyView extends React.Component {

  // our parent component will hold dates while DatePicker is stateless.
  state = {
    startDate: null,
    endDate: null,
  }

  // this function will be executed after some date was selected in DatePicker.
  handleDateSelect = (event) => {
    // we will back into that later.
  }

  render() {
    return (
      <DatePicker
        range
        startDate={this.state.startDate}
        endDate={this.state.startDate}
        onDateSelect={this.handleDateSelect}
      />
    )
  }

}

Nothing fancy. If you're confused by state and handleDateSelect syntax read this article.

Let's back to handleDateSelect. This method is called out every time the start or end date should be changed, in the parent component. event argument is an Object with two keys: type and value.
type is a START or END string. value is a moment.js instance or null if date was removed.

// start date is 24-01-2017
{type:'START', value: moment('24-01-2017')}

// end date is 14-02-2017
{type:'END', value: moment('14-02-2017')}

// start date is unest
{type:'START', value: null}

// end date is unset
{type:'END', value: null}

While strings like START and END are uncool you can always

import { SelectTypes } from 'react-dates-range-picker'

The simplest implementation of the handleDateSelect method can be:

class MyView extends React.Component {
  // ...
  handleDateSelect = ({ type, value }) => {
    const key = type === SelectTypes.START ? 'startDate' : 'endDate';
    this.setState({ [key]: value });
  };
  // ...
}

Props

range - bool / false - select range or single date

months - number / 1 - number of visible months

initialVisibleMonth - number / 0 - first visible month. -1 previous, 1 next, etc.

onDateSelect - function / required - will be called every time start / end date was changed. For range={false} will always set type='START'.

minDate - moment / -Infinity - min. date that can be selected.

maxDate - moment / -Infinity - max. date that can be selected.

modifires - object / See Default modifiers section.

startDate - moment / null - selected start date. When range={false} is just selected date.

endDate - moment / null - selected end date. When range={false} is just selected date.


Info: All additional props will be passesd into inner DayPicker component from react-dates.

Default modifiers

react-dates-range-picker will always add four modifiers:

  • selected-start
  • selected
  • selected-end
  • blocked

You can read more about modifiers in react-dates docs.

onDateSelect flow

  1. If date is blocked nothing is sent
  2. If range is true
    1. If startDate is not defined {type:'START', value} will be sent
    2. If selected date is before startDate two events are sent:
      1. {type:'START', value}
      2. {type:'END', null}
    3. If selected date is after startDate
      1. If both startDate and endDate are defined
        1. {type:'START', value}
        2. {type:'END', null}
      2. Otherwise {type:'END', value}will be sent
  3. If range is false {type:'START', value} will be sent every time date changes.

主要指標

概覽
名稱與所有者RafalFilipek/react-dates-range-picker
主編程語言JavaScript
編程語言JavaScript (語言數: 1)
平台
許可證MIT License
所有者活动
創建於2017-01-24 21:06:37
推送於2017-08-15 17:11:36
最后一次提交2017-01-29 14:15:13
發布數5
最新版本名稱v0.1.0 (發布於 )
第一版名稱v0.0.1 (發布於 )
用户参与
星數4
關注者數1
派生數2
提交數10
已啟用問題?
問題數1
打開的問題數1
拉請求數0
打開的拉請求數0
關閉的拉請求數1
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?