---
title: "React Date & Time Initializing the picker Example | Mobiscroll"
component: "Date & Time"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/datetime/usage-on-input-or-inline"
---

# Initializing the picker - React Date & Time demo

React date and time picker component with usage on inputs or directly embeddable on page or in complex modals. For React and Next.js.

- [Live demo](https://demo.mobiscroll.com/react/datetime/usage-on-input-or-inline)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/datetime/usage-on-input-or-inline)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/datetime/usage-on-input-or-inline)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/datetime/usage-on-input-or-inline.md), [jQuery](https://demo.mobiscroll.com/jquery/datetime/usage-on-input-or-inline.md), [Angular](https://demo.mobiscroll.com/angular/datetime/usage-on-input-or-inline.md), [Vue](https://demo.mobiscroll.com/vue/datetime/usage-on-input-or-inline.md)

## Description

The date picker component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overridden by setting the relevant options for the component.

There are three ways to use the date picker:

- Use it on an existing input by using the `inputComponent` prop. A great example is usage with an `IonInput`
- Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
- Embed the picker without an input. This can be the page itself or a more complex popup

## What this demo shows

- Shows two wheel-style date picker for selecting a single date using input-based pickers or an inline display.
- **Date picker with inputs** The first example open the picker when the user focuses or clicks the input.
- **Input behavior** The input-based pickers open below the input with a darkened backdrop. Clicking outside the picker closes it.
- **Inline date picker** The second example embeds the date picker directly in the page without an input by using inline display mode.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll or click and drag separate columns vertically through neighboring values to move between dates, including dates in other months or years.
- **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date.
- **Input value** In the input-based examples, confirming a date with `Set` displays the selected value in the input using a month, day, and year format.

## Best for

- **Single-date form fields** Choosing one date for an appointment, reservation, delivery, or deadline from an input-based picker.
- **Compact forms** Keeping the date picker hidden until the user focuses or clicks a date field.
- **Always-visible date selection** Embedding a wheel-style picker directly in a page when users need immediate access to date selection.

## Tutorial

### Date picker with input

Use it on any external input by passing the component to the `inputComponent` option.

```jsx
<Datepicker
    controls={['date']}
    inputComponent="input"
    inputProps={{
        placeholder: 'Please Select...'
    }}
/>
```

If you don't pass a reference to an external input, the component takes care of generating its own input.

```jsx
<Datepicker
    controls={['date']}
/>
```

### Embeddable date picker

It can be embedded into the page or a popup as an inline picker by setting the `display` option to `inline`.

```jsx
<Datepicker
    controls={['date']}
    display="inline"
/>
```

## 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
- [`inputComponent`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputComponent) - option
- [`inputProps`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputProps) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-labelStyle) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option

## Code

### JSX

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

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

function App() {
  return (
    <Page>
      <Datepicker controls={['date']} inputComponent="input" inputProps={{ placeholder: 'Please Select...' }} />
      <Datepicker controls={['date']} inputStyle="outline" label="Date" labelStyle="stacked" placeholder="Please Select..." />
      <Datepicker controls={['date']} display="inline" />
    </Page>
  );
}

export default App;
```

### TSX

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

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

const App: FC = () => (
  <Page>
    <Datepicker controls={['date']} inputComponent="input" inputProps={{ placeholder: 'Please Select...' }} />
    <Datepicker controls={['date']} inputStyle="outline" label="Date" labelStyle="stacked" placeholder="Please Select..." />
    <Datepicker controls={['date']} display="inline" />
  </Page>
);

export default App;
```

## Implementation notes

- All examples use `controls: ['date']` - this demo only varies how the picker attaches to the page, not which controls it renders; there is no multiple-date/chip variant here.
- **On an existing/custom input**: React/Vue bind the picker to a plain `<input>` (or a custom input component) via the `inputComponent` option, with `inputProps` for attributes like `placeholder`. Angular applies the picker as a directive directly on an existing input element (e.g. `<input mbsc-datepicker>`, including third-party inputs like `ion-input`) instead of using the standalone component. JS/jQuery initialize the picker on a plain existing `<input>` element the same way they would on a generated one, since their datepicker call always targets an existing DOM element by selector.
- **On a generated Mobiscroll input**: for React and Angular, omitting `inputComponent`/the directive form and just rendering `<Datepicker controls={['date']} />` / `<mbsc-datepicker [controls]="['date']">` lets the component generate its own styled Mobiscroll input.
- **Inline, no input**: use `controls: ['date']` with `display: 'inline'` on a plain container instead of an input. JS/jQuery initialize on a `<div>` (or a hidden `<input type="hidden">`) rather than a visible text input, since there is no input to render when the picker is embedded directly in the page.
- `display: 'anchored'` (the default) is used for the input-bound variants; it is not set explicitly in the framework snippets since it's the default.

## 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: [Mobile & Desktop usage](https://demo.mobiscroll.com/react/datetime/mobile-desktop-usage.md) - React Date & time picker for desktop and mobile with touch and non-touch scroll. Supports pointer interaction.
- Next: [Responsive behavior](https://demo.mobiscroll.com/react/datetime/responsive.md) - Responsive React date time picker. Define how it shows up across multiple screen sizes for touch and mouse interaction.