---
title: "React Calendar Input Field or Inline Embed Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/calendar/usage-on-input-or-inline"
---

# Input Field or Inline Embed - React Calendar demo

Attach the React calendar date picker to a form input or embed it inline without an input — supports generated and custom inputs. For React and Next.js.

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

## Description

The calendar 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 calendar:

- 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

- Three monthly date picker examples for selecting a single date or multiple dates using input-based pickers or an inline display.
- **Date picker with inputs** The first and second examples 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 third example embeds the date picker directly in the page without an input by using inline display mode.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month. 
- **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** After the user confirms a single date with Set, the input displays it in month, day, and year format.
- **Multiple date selection** The second example supports selecting multiple dates. Selected days have a blue background, and confirming with Set displays them as removable date chips in the input. Clicking a chip's remove button removes that date from the selection.

## Best for

- **Single-date form fields** Choosing one date for an appointment, reservation, delivery, or deadline from an input-based picker.
- **Multiple nonconsecutive dates** Selecting several dates for attendance, availability, recurring visits, or planned workdays and reviewing them as removable chips in an input.
- **Compact forms** Keeping the date picker hidden until the user focuses or clicks a date field.
- **Always-visible date selection** Embedding a monthly picker directly in a page when users need immediate access to calendar navigation and date selection.

## Tutorial

### Calendar picker with input

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

```jsx
<Datepicker
    controls={['calendar']}
    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={['calendar']}
/>
```

### Multiple date selection

Use it for multiple date picking with a mobiscroll input and pill rendering for the selected values.

```jsx
<Datepicker
    controls={['calendar']}
    selectMultiple={true}
/>
```

### Embeddable calendar 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={['calendar']}
    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
- [`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 inputComponent="input" inputProps={{ placeholder: 'Please Select...' }} />
      <Datepicker inputStyle="outline" label="Date" labelStyle="stacked" placeholder="Please Select..." />
      <Datepicker 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 inputComponent="input" inputProps={{ placeholder: 'Please Select...' }} />
    <Datepicker inputStyle="outline" label="Date" labelStyle="stacked" placeholder="Please Select..." />
    <Datepicker display="inline" />
  </Page>
);
export default App;
```

## Implementation notes

- **On an input, generated Mobiscroll input**: use `controls: ['calendar']` with `display: 'anchored'` (the default) on a labeled input (`label`, `inputStyle`, `labelStyle`, `placeholder`) - the picker opens on focus/click and writes the formatted value back into the input.
- **On an input, custom external input**: React/Vue bind the picker to a plain `<input>` (or any custom input component) via the `inputComponent` option, optionally 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 don't need this variant - their generated Mobiscroll input already covers both input cases.
- **Multiple dates on a generated input**: `controls: ['calendar']` with `selectMultiple: true` on a tag-enabled input (`tags: true` / `data-tags="true"`) - confirmed dates render as removable chips inside the generated Mobiscroll input.
- **Inline, no input**: use `controls: ['calendar']` with `display: 'inline'` on a plain container instead of an input.

## 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: [Touch & Desktop Layout](https://demo.mobiscroll.com/react/calendar/mobile-desktop-usage.md) - Set the React date picker to render in touch-optimized or desktop mode — link to a form input, trigger from a button, or embed it inline.
- Next: [Responsive Calendar](https://demo.mobiscroll.com/react/calendar/responsive.md) - A React date picker that switches layout by screen size — bottom-sheet on mobile, popover on tablet, and inline calendar on desktop.