react-date-rangepicker-v7

antd-jalaali-datepicker

Usage no npm install needed!

<script type="module">
  import reactDateRangepickerV7 from 'https://cdn.skypack.dev/react-date-rangepicker-v7';
</script>

README

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.