Skip to content

danialghahremani/react-reserve-rangepicker

Repository files navigation

React Reserve Rangepicker/Datepicker

Gregorian and Persian (Jalaali) Calendar

Installation

npm

npm install react-reserve-rangepicker

yarn

yarn add react-reserve-rangepicker

Usage

Rangepicker Component

/* @flow */
import React, { PureComponent } from "react";
import { RangePicker } from "react-reserve-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-reserve-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
isPersian localization configuration boolean False
disableDate Specifies whether or not the previous days are selectable 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.