---
title: "React Range RTL Support Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/range/rtl-right-to-left"
---

# RTL Support - React Range demo

Use the React date range picker with built-in RTL support — set right-to-left layout manually or inherit it from locale settings. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/range/rtl-right-to-left)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/range/rtl-right-to-left)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/range/rtl-right-to-left)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/range/rtl-right-to-left.md), [jQuery](https://demo.mobiscroll.com/jquery/range/rtl-right-to-left.md), [Angular](https://demo.mobiscroll.com/angular/range/rtl-right-to-left.md), [Vue](https://demo.mobiscroll.com/vue/range/rtl-right-to-left.md)

## Description

RTL support is built in and can be explicitly controlled through the `rtl` option. If not set, it is inherited from the [`locale`](https://mobiscroll.com/docs/react/datepicker/api#localization-locale) settings.

**Explore the different locales** [Check out this example →](https://demo.mobiscroll.com/react/range/localization)

## What this demo shows

- Shows a date range picker example for selecting a start and end date from a monthly calendar.
- **RTL control** A side panel next to the date range picker calendar includes an `Enable Right-To-Left rendering` switch, which is enabled by default.
- **Inline date range picker** This example embeds the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-right corner opens the month and year picker. The previous and next arrow buttons on the left navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.

## Best for

- **RTL interfaces** Building date range picker calendars for products used in right-to-left languages such as Arabic, Hebrew, or Farsi.
- **Multilingual applications** Supporting users who need the same date range picker workflow in both LTR and RTL rendering modes.

## Tutorial

### Enable Right-To-Left rendering

- [x] Turn RTL on

```jsx
<Datepicker
    rtl={true}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option
- [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - option
- [`rtl`](https://mobiscroll.com/docs/react/datepicker/api#localization-rtl) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option

## Code

### JSX

```jsx
import { Datepicker, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  return (
    <div>
      <Datepicker select="range" rtl={true} display="inline" />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => <Datepicker controls={['calendar']} select="range" rtl={true} display="inline" />;
export default App;
```

## Implementation notes

- Set `rtl: true`/`false` on the range `Datepicker` (`select: 'range'`, `display: 'inline'`, `controls: ['calendar']`) to explicitly force right-to-left or left-to-right rendering.
- When `rtl` is not set, it is inherited from the `locale` option instead - pick an RTL locale (e.g. Arabic, Hebrew) to get RTL layout without setting `rtl` directly.
- React passes it as a prop (`<Datepicker rtl={true} />`); Angular binds it with `[rtl]="true"`; Vue binds it with `:rtl="true"`; JS/jQuery pass `rtl: true` in the options object.
- `rtl` can be changed at runtime on an existing instance via `.setOptions({ rtl: checked })` (JS/jQuery) or by updating the bound prop/state in React/Angular/Vue - the calendar's header arrows, weekday order, and grid direction flip accordingly.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Localization](https://demo.mobiscroll.com/react/range/localization.md) - Localize the React date range picker — set date and time formats, button labels, RTL support, and 37 languages, with overridable settings.