React Reserve Rangepicker

Gregorian and Persian (Jalaali) Calendar

Installation

npm

npm install react-itours-rangepicker

yarn

yarn add react-itours-rangepicker

Usage

Rangepicker Component

/* @flow */
import React, { PureComponent } from "react";
import { Rangepicker } from "react-itours-rangepicker";

class MyComponent extends PureComponent {
  render() {
    return (
      <div className="MyComponent">
        <Rangepicker />
      </div>
    );
  }
}

export default MyComponent;

Datepicker Component

/* @flow */
import React, { PureComponent } from "react";
import { Datepicker } from "react-itours-rangepicker";

class MyComponent extends PureComponent {
  render() {
    return (
      <div className="MyComponent">
        <Datepicker />
      </div>
    );
  }
}

export default MyComponent;

API

The following APIs are shared by Datepicker and Rangepicker.

| Property | Description | Type | Default | Example | | ------------------ | --------------------------------------------------------- | ---------------- | ---------- | -------------------------------- | | enableDateFrom | To specify the start of the active date interval | string | - | enableDateFrom="2019-07-25" | | enableDateTo | To specify the end of the active date interval | string | - | enableDateTo="2019-07-30" | | disablePastDays | Specifies whether or not the previous days are selectable | boolean | False | | | preventTwice | Prevents duplicate selection of a date | boolean | False | | | showTime | to provide an additional time selection | object / boolean | False | showTime={{ format: ‘HH:mm’ }} | | disabledHourFrom | To specify the start of the inactive time interval | object | { } | disabledHourFrom={10} | | disabledHourTo | To specify the end of the inactive time interval | object | { } | disabledHourTo={12} | | disabledMinuteFrom | To specify the start of the inactive minute interval | object | { } | disabledMinuteFrom={20} | | disabledMinuteTo | To specify the end of the inactive minute interval | object | { } | disabledMinuteTo={30} | | startPlaceholder | Change first input placeholder | string | Start Date | | | endPlaceholder | Change second input placeholder | string | End Date | |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.