react-date-range

Description

Date range component is a component that can be useful for selecting date ranges.

Installation

npm install @opuscapita/react-date-range

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

| Prop name | Type | Default | Description | | ------------- | ------------------ | -------- | ---------------------------------------- | | id | string | required | ID for the DOM element | | absoluteRange | absoluteRangeShape | | Properties for absolute range | | className | string | '' | Class for the DOM element | | enabled | enabledShape | '' | Properties for enabling range types | | inputProps | object | {} | Custom props for the input field | | inputRef | function | | Input component ref function | | onChange | function | | onChange callback returns new date range | | period | periodShape | | Properties for period | | relativeRange | relativeRangeShape | | Properties for relative range | | translations | translationsShape | | Translations | | width | string | '200px' | Width of the date range input field |

• absoluteRangeShape:

| Prop name | Type | Default | Description | | -------------- | -------- | ---------- | ----------------------------------------------------------------------------------------------------- | | className | string | '' | The class attribute of the element | | dateFormat | string | 'M/D/YYYY' | Date format as MomentJS format | | endDate | string | '' | End date | | numberOfMonths | number | 2 | The number of months to render format | | onChange | function | | onChange callback | | region | string | 'en_GB' | Language region | | showOverlay | number | 0 | 0: no calender, 1: first day calendar, 2: last day calendar open by default | | showWeekNumber | boolean | true | Show week number in calendar | | startDate | string | '' | Start date |

• enabledShape:

| Prop name | Type | Default | Description | | --------- | ---- | ------- | ----------------------------------- | | absolute | bool | true | True, if absolute range is enabled. | | period | bool | false | True, if period is enabled. | | relative | bool | false | True, if relative range is enabled. |

• periodShape:

| Prop name | Type | Default | Description | | --------- | ----------------- | ------- | ----------------- | | endDate | periodDateShape | | End date | | onChange | function | | onChange callback | | startDate | relativeDateShape | | Start date |

• periodDateShape:

| Prop name | Type | Default | Description | | --------- | ------ | -------- | ------------------------------------------------------------------- | | unit | enum | required | 'DAY', 'WEEK' or 'MONTH' | | timing | number | required | Negative or positive integer | | moment | enum | required | 'END' if timing is positive, 'START' if timing is negative integer. | | periodic | bool | true | True, if date is periodic. |

• relativeDateShape:

| Prop name | Type | Default | Description | | --------- | ---- | -------- | -------------------------------- | | unit | enum | required | 'DAY', 'WEEK', 'MONTH' or 'YEAR' | | timing | enum | required | 'PREVIOUS', 'CURRENT' or 'NEXT' | | moment | enum | required | 'END' or 'START' |

• relativeRangeShape:

| Prop name | Type | Default | Description | | --------- | ----------------- | ------- | ----------------- | | endDate | relativeDateShape | | End date | | onChange | function | | onChange callback | | startDate | relativeDateShape | | Start date |

• translationsShape:

| Prop name | Type | Default | Description | | -------------------- | ---------------------- | ----------- | ------------------------------- | | absolute | string | 'Absolute' | Absolute range label | | dates | datesTranslationsShape | | | | day | dayTranslationShape | | | | endDate | string | 'Last day' | Last date label | | endDatePlaceholder | string | 'Select...' | Placeholder of select component | | from | string | 'From' | From date label | | month | monthTranslationShape | | | | period | string | 'Period' | Period label | | relative | string | 'Relative' | Relative range label | | startDate | string | 'First day' | First date label | | startDatePlaceholder | string | 'Select...' | Placeholder of select component | | to | string | 'To' | To label | | week | weekTranslationShape | | | | ok | string | 'OK' | OK button label |

• datesTranslationsShape:

| Prop name | Type | Default | Description | | ----------------------- | ------ | ----------------------------- | ----------- | | endOfTheCurrentMonth | string | 'End of the current month' | | | endOfTheCurrentWeek | string | 'End of the current week' | | | endOfTheCurrentYear | string | 'End of the current year' | | | endOfTheNextMonth | string | 'End of the next month' | | | endOfTheNextWeek | string | 'End of the next week' | | | endOfTheNextYear | string | 'End of the next year' | | | endOfThePreviousMonth | string | 'End of the previous month' | | | endOfThePreviousWeek | string | 'End of the previous week' | | | endOfThePreviousYear | string | 'End of the previous year' | | | startOfTheCurrentMonth | string | 'Start of the current month' | | | startOfTheCurrentWeek | string | 'Start of the current week' | | | startOfTheCurrentYear | string | 'Start of the current year' | | | startOfTheNextMonth | string | 'Start of the next month' | | | startOfTheNextWeek | string | 'Start of the next week' | | | startOfTheNextYear | string | 'Start of the next year' | | | startOfThePreviousMonth | string | 'Start of the previous month' | | | startOfThePreviousWeek | string | 'Start of the previous week' | | | startOfThePreviousYear | string | 'Start of the previous year' | | | today | string | 'Today' | | | tomorrow | string | 'Tomorrow' | | | yesterday | string | 'Yesterday' | |

• dayTranslationShape:

| Prop name | Type | Default | Description | | --------- | ------ | ------- | ----------------------- | | plural | string | 'days' | Label for plural of day | | singular | string | 'day' | Label for single day |

• monthTranslationShape:

| Prop name | Type | Default | Description | | --------- | ------ | -------- | ------------------------- | | plural | string | 'months' | Label for plural of month | | singular | string | 'month' | Label for single month |

• weekTranslationShape:

| Prop name | Type | Default | Description | | --------- | ------ | ------- | ------------------------ | | plural | string | 'weeks' | Label for plural of week | | singular | string | 'week' | Lable for single week |

Code example

import React from 'react';
import DateRange from '@opuscapita/react-date-range';

export default class DateRangeView extends React.Component {
  render() {
    return (
      <DateRange
        id="id"
      />
    );
  }
}