605-react-date-range 中文文档教程

发布于 3年前 浏览 90 项目主页 更新于 3年前

react-date-range

npm[npm]() npmsponsors

A与日期库无关的 React 组件,用于选择日期和日期范围。 使用 date-fns 进行日期操作。

Why should you use react-date-range?

  • Stateless date operations
  • Highly configurable
  • Multiple range selection
  • Based on native js dates
  • Drag n Drop selection
  • Keyboard friendly

现场演示: http://hypeserver.github.io/react-date-range

Getting Started

Installation

npm install --save react-date-range

这个插件需要 react 和 < code>date-fns as peerDependencies,表示需要安装在你的项目文件夹中。

npm install --save react date-fns

Usage

您需要先导入骨架和主题样式。

import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

DatePicker

import { Calendar } from 'react-date-range';

class MyComponent extends Component {
  handleSelect(date){
    console.log(date); // native Date object
  }
  render(){
    return (
      <Calendar
        date={new Date()}
        onChange={this.handleSelect}
      />
    )
  }
}

DateRangePicker / DateRange

import { DateRangePicker } from 'react-date-range';

class MyComponent extends Component {
  handleSelect(ranges){
    console.log(ranges);
    // {
    //   selection: {
    //     startDate: [native Date Object],
    //     endDate: [native Date Object],
    //   }
    // }
  }
  render(){
    const selectionRange = {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
    return (
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={this.handleSelect}
      />
    )
  }
}

Options

PropertytypeDefault ValueDescription
localeObjectenUS from localeyou can view full list from here. Locales directly exported from date-fns/locales.
classNameStringwrapper classname
monthsNumber1rendered month count
showSelectionPreviewBooleantrueshow preview on focused/hovered dates
showMonthAndYearPickersBooleantrueshow select tags for month and year on calendar top, if false it will just display the month and year
rangeColorsString[]defines color for selection preview.
shownDateDateinitial focus date
minDateDatedefines minimum date. Disabled earlier dates
maxDateDatedefines maximum date. Disabled later dates
directionString'vertical'direction of calendar months. can be vertical or horizontal
disabledDatesDate[][]dates that are disabled
disabledDayFuncpredicate function that disable day fn(date: Date)
scrollObject{ enabled: false }infinite scroll behaviour configuration. Check out Infinite Scroll section
showMonthArrowBooleantrueshow/hide month arrow button
navigatorRendererFuncrenderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
ranges*Object[][]Defines ranges. array of range object
moveRangeOnFirstSelection(DateRange)Booleanfalsemove range on startDate selection. Otherwise endDate will replace with startDate unless retainEndDateOnFirstSelection is set to true.
retainEndDateOnFirstSelection(DateRange)BooleanfalseRetain end date when the start date is changed, unless start date is later than end date. Ignored if moveRangeOnFirstSelection is set to true.
onChange(Calendar)Funccallback function for date changes. fn(date: Date)
onChange(DateRange)Funccallback function for range changes. fn(changes). changes contains changed ranges with new startDate/endDate properties.
color(Calendar)String#3d91ffdefines color for selected date in Calendar
date(Calendar)Datedate value for Calendar
showDateDisplay(DateRange)Booleantrueshow/hide selection display row. Uses dateDisplayFormat for formatter
onShownDateChange(DateRange,Calendar)FunctionCallback function that is called when the shown date changes
initialFocusedRange(DateRange)ObjectInitial value for focused range. See focusedRange for usage.
focusedRange(DateRange)ObjectIt defines which range and step are focused. Common initial value is [0, 0]; first value is index of ranges, second one is which step on date range(startDate or endDate).
onRangeFocusChange(DateRange)ObjectCallback function for focus changes
preview(DateRange)Objectdisplays a preview range and overwrite DateRange's default preview. Expected shape: { startDate: Date, endDate: Date, color: String }
showPreview(DateRange)booltruevisibility of preview
editableDateInputs(Calendar)boolfalsewhether dates can be edited in the Calendar's input fields
dragSelectionEnabled(Calendar)booltruewhether dates can be selected via drag n drop
onPreviewChange(DateRange)ObjectCallback function for preview changes
dateDisplayFormatStringMMM d, yyyyselected range preview formatter. Check out date-fns's format option
dayDisplayFormatStringdselected range preview formatter. Check out date-fns's format option
weekdayDisplayFormatStringEselected range preview formatter. Check out date-fns's format option
monthDisplayFormatStringMMM yyyyselected range preview formatter. Check out date-fns's format option
weekStartsOnNumberWhether the week start day that comes from the locale will be overriden. Default value comes from your locale, if no local is specified, note that default locale is enUS
startDatePlaceholderStringEarlyStart Date Placeholder
endDatePlaceholderStringContinuousEnd Date Placeholder
fixedHeightBooleanfalseSince some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.
renderStaticRangeLabel(DefinedRange)FunctionCallback function to be triggered for the static range configurations that have hasCustomRendering: true on them. Instead of rendering staticRange.label, return value of this callback will be rendered.
staticRanges(DefinedRange, DateRangePicker)Arraydefault preDefined ranges-
inputRanges(DefinedRange, DateRangePicker)Arraydefault input ranges-
ariaLabelsObject{}inserts aria-label to inner elements
dayContentRendererFunctionnullFunction to customize the rendering of Calendar Day. given a date is supposed to return what to render.

*范围形状:

  {
    startDate: PropTypes.object,
    endDate: PropTypes.object,
    color: PropTypes.string,
    key: PropTypes.string,
    autoFocus: PropTypes.bool,
    disabled: PropTypes.bool,
    showDateDisplay: PropTypes.bool,
  }

**ariaLabels 形状:

  {
    // The key of dateInput should be same as key in range.
    dateInput: PropTypes.objectOf(
      PropTypes.shape({
        startDate: PropTypes.string,
        endDate: PropTypes.string
      })
    ),
    monthPicker: PropTypes.string,
    yearPicker: PropTypes.string,
    prevButton: PropTypes.string,
    nextButton: PropTypes.string,
  }

Infinite Scrolled Mode

要启用无限滚动设置 scroll={{enabled: true}} 基本上。 无限滚动功能直接受 direction(月份的渲染方向)和 months(渲染的月份计数)道具的影响。 如果您愿意,可以使用 calendarWidth/calendarHeight 覆盖日历大小,或者使用 monthWidth/monthHeight 覆盖每个月的高度/withs >/longMonthHeightscroll 道具。

  // shape of scroll prop
  scroll: {
    enabled: PropTypes.bool,
    monthHeight: PropTypes.number,
    longMonthHeight: PropTypes.number, // some months has 1 more row than others
    monthWidth: PropTypes.number, // just used when direction="horizontal"
    calendarWidth: PropTypes.number, // defaults monthWidth * months
    calendarHeight: PropTypes.number, // defaults monthHeight * months
  }),

Release workflow

  • Merge everything that needs to be in the release to master
  • Open a new release PR than:
  • bumps version to appropriate one
  • Update CHANGELOG.md
  • Make sure the demo and important features are working as expected
  • After merging, tag the master commit with release/<new_version> and let Github Action handle publishing
  • = Profit ????

TODOs

  • Make mobile friendly (integrate tap and swipe actions)
  • Add tests
  • Improve documentation

react-date-range

npm[npm]() npmsponsors

A date library agnostic React component for choosing dates and date ranges. Uses date-fns for date operations.

Why should you use react-date-range?

  • Stateless date operations
  • Highly configurable
  • Multiple range selection
  • Based on native js dates
  • Drag n Drop selection
  • Keyboard friendly

Live Demo : http://hypeserver.github.io/react-date-range

Getting Started

Installation

npm install --save react-date-range

This plugin expects react and date-fns as peerDependencies, It means that you need to install them in your project folder.

npm install --save react date-fns

Usage

You need to import skeleton and theme styles first.

import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

DatePicker

import { Calendar } from 'react-date-range';

class MyComponent extends Component {
  handleSelect(date){
    console.log(date); // native Date object
  }
  render(){
    return (
      <Calendar
        date={new Date()}
        onChange={this.handleSelect}
      />
    )
  }
}

DateRangePicker / DateRange

import { DateRangePicker } from 'react-date-range';

class MyComponent extends Component {
  handleSelect(ranges){
    console.log(ranges);
    // {
    //   selection: {
    //     startDate: [native Date Object],
    //     endDate: [native Date Object],
    //   }
    // }
  }
  render(){
    const selectionRange = {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
    return (
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={this.handleSelect}
      />
    )
  }
}

Options

PropertytypeDefault ValueDescription
localeObjectenUS from localeyou can view full list from here. Locales directly exported from date-fns/locales.
classNameStringwrapper classname
monthsNumber1rendered month count
showSelectionPreviewBooleantrueshow preview on focused/hovered dates
showMonthAndYearPickersBooleantrueshow select tags for month and year on calendar top, if false it will just display the month and year
rangeColorsString[]defines color for selection preview.
shownDateDateinitial focus date
minDateDatedefines minimum date. Disabled earlier dates
maxDateDatedefines maximum date. Disabled later dates
directionString'vertical'direction of calendar months. can be vertical or horizontal
disabledDatesDate[][]dates that are disabled
disabledDayFuncpredicate function that disable day fn(date: Date)
scrollObject{ enabled: false }infinite scroll behaviour configuration. Check out Infinite Scroll section
showMonthArrowBooleantrueshow/hide month arrow button
navigatorRendererFuncrenderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
ranges*Object[][]Defines ranges. array of range object
moveRangeOnFirstSelection(DateRange)Booleanfalsemove range on startDate selection. Otherwise endDate will replace with startDate unless retainEndDateOnFirstSelection is set to true.
retainEndDateOnFirstSelection(DateRange)BooleanfalseRetain end date when the start date is changed, unless start date is later than end date. Ignored if moveRangeOnFirstSelection is set to true.
onChange(Calendar)Funccallback function for date changes. fn(date: Date)
onChange(DateRange)Funccallback function for range changes. fn(changes). changes contains changed ranges with new startDate/endDate properties.
color(Calendar)String#3d91ffdefines color for selected date in Calendar
date(Calendar)Datedate value for Calendar
showDateDisplay(DateRange)Booleantrueshow/hide selection display row. Uses dateDisplayFormat for formatter
onShownDateChange(DateRange,Calendar)FunctionCallback function that is called when the shown date changes
initialFocusedRange(DateRange)ObjectInitial value for focused range. See focusedRange for usage.
focusedRange(DateRange)ObjectIt defines which range and step are focused. Common initial value is [0, 0]; first value is index of ranges, second one is which step on date range(startDate or endDate).
onRangeFocusChange(DateRange)ObjectCallback function for focus changes
preview(DateRange)Objectdisplays a preview range and overwrite DateRange's default preview. Expected shape: { startDate: Date, endDate: Date, color: String }
showPreview(DateRange)booltruevisibility of preview
editableDateInputs(Calendar)boolfalsewhether dates can be edited in the Calendar's input fields
dragSelectionEnabled(Calendar)booltruewhether dates can be selected via drag n drop
onPreviewChange(DateRange)ObjectCallback function for preview changes
dateDisplayFormatStringMMM d, yyyyselected range preview formatter. Check out date-fns's format option
dayDisplayFormatStringdselected range preview formatter. Check out date-fns's format option
weekdayDisplayFormatStringEselected range preview formatter. Check out date-fns's format option
monthDisplayFormatStringMMM yyyyselected range preview formatter. Check out date-fns's format option
weekStartsOnNumberWhether the week start day that comes from the locale will be overriden. Default value comes from your locale, if no local is specified, note that default locale is enUS
startDatePlaceholderStringEarlyStart Date Placeholder
endDatePlaceholderStringContinuousEnd Date Placeholder
fixedHeightBooleanfalseSince some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.
renderStaticRangeLabel(DefinedRange)FunctionCallback function to be triggered for the static range configurations that have hasCustomRendering: true on them. Instead of rendering staticRange.label, return value of this callback will be rendered.
staticRanges(DefinedRange, DateRangePicker)Arraydefault preDefined ranges-
inputRanges(DefinedRange, DateRangePicker)Arraydefault input ranges-
ariaLabelsObject{}inserts aria-label to inner elements
dayContentRendererFunctionnullFunction to customize the rendering of Calendar Day. given a date is supposed to return what to render.

*shape of range:

  {
    startDate: PropTypes.object,
    endDate: PropTypes.object,
    color: PropTypes.string,
    key: PropTypes.string,
    autoFocus: PropTypes.bool,
    disabled: PropTypes.bool,
    showDateDisplay: PropTypes.bool,
  }

**shape of ariaLabels:

  {
    // The key of dateInput should be same as key in range.
    dateInput: PropTypes.objectOf(
      PropTypes.shape({
        startDate: PropTypes.string,
        endDate: PropTypes.string
      })
    ),
    monthPicker: PropTypes.string,
    yearPicker: PropTypes.string,
    prevButton: PropTypes.string,
    nextButton: PropTypes.string,
  }

Infinite Scrolled Mode

To enable infinite scroll set scroll={{enabled: true}} basically. Infinite scroll feature is affected by direction(rendering direction for months) and months(for rendered months count) props directly. If you prefer, you can overwrite calendar sizes with calendarWidth/calendarHeight or each month's height/withs with monthWidth/monthHeight/longMonthHeight at scroll prop.

  // shape of scroll prop
  scroll: {
    enabled: PropTypes.bool,
    monthHeight: PropTypes.number,
    longMonthHeight: PropTypes.number, // some months has 1 more row than others
    monthWidth: PropTypes.number, // just used when direction="horizontal"
    calendarWidth: PropTypes.number, // defaults monthWidth * months
    calendarHeight: PropTypes.number, // defaults monthHeight * months
  }),

Release workflow

  • Merge everything that needs to be in the release to master
  • Open a new release PR than:
  • bumps version to appropriate one
  • Update CHANGELOG.md
  • Make sure the demo and important features are working as expected
  • After merging, tag the master commit with release/<new_version> and let Github Action handle publishing
  • = Profit ????

TODOs

  • Make mobile friendly (integrate tap and swipe actions)
  • Add tests
  • Improve documentation
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文