---
title: "React Date & Time RTL mode Example | Mobiscroll"
component: "Date & Time"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/datetime/rtl-right-to-left"
---

# RTL mode - React Date & Time demo

React datetime picker with RTL support. Manual control and built-in right to left languages: Arabic, Hebrew, Farsi. For React and Next.JS.

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

## What this demo shows

- Shows a wheel-style inline date picker with RTL mode enabled.
- **RTL control** A side panel next to the date picker includes an `Enable Right-To-Left rendering` switch, which is enabled by default.
- **Inline date picker** The example embeds the picker directly in the page without an input by using inline display mode.
- **Date selection** Separate scrollable wheels let users select the AM/PM, minute, hours and the exact date. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.

## Best for

- **RTL interfaces** Building date 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 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
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option
- [`rtl`](https://mobiscroll.com/docs/react/datepicker/api#localization-rtl) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option

## Code

### JSX

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

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

function App() {
  return (
    <div>
      <Datepicker controls={['datetime']} 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={['datetime']} rtl={true} display="inline" />;
export default App;
```

## Implementation notes

- Use `controls: ['datetime']` and `display: 'inline'`.
- Set `rtl: true` to mirror the entire wheel layout - the AM/PM, minute, hour, and date wheel columns all flip order and direction, and all supporting UI text aligns right-to-left; `rtl: false` (or omitting it) renders left-to-right.
- Toggle at runtime via `setOptions({ rtl: true | false })` on the instance.
- Pair `rtl` with a matching RTL `locale` (e.g. `mobiscroll.locale.ar`, `mobiscroll.locale.he`) when the language itself is right-to-left, since `rtl` only controls layout direction, not translated day/month names.

## 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/datetime/localization.md) - React Date & time picker localization example supporting 37 languages, date, time formats with full RTL capability.