---
title: "React Range Event Date Selection Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/range/adding-event-start-end"
---

# Event Date Selection - React Range demo

Pick start and end dates for events with the React date range picker — switch between date-only and date and time entry with an all-day toggle. For React and Next.JS.

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

## Description

Use the range picker for a new event creation. Let people pick start and end dates when adding events.

Dynamically switch between date only and date-time entry based on an "all-day" switch by changing the `controls` to `'date'` or `'datetime'`.

**Interested in an event calendar solution?** [Check out the event calendar →](https://demo.mobiscroll.com/react/eventcalendar)

## What this demo shows

- Shows a mobile form for creating and editing calendar events with a date range picker.
- **Event details** Fields for the title, location, all-day status, start and end date and time, availability, and notes.
- **Initial values** The editor can open with predefined start and end values or empty date fields for the user to complete.
- **All-day events** A toggle switches between timed and all-day events, changing the picker controls from date and time to date only.
- **Availability** A segmented control sets the event status to busy or free.
- **Date and time selection** Selecting the start or end field opens a wheel-style picker optimized for touch interaction.
- **Range editing** The start and end values can be edited independently while both remain visible in the picker for context.
- **Picker actions** Cancel discards date and time changes, while Set confirms them.

## Best for

- **Calendar event creation** Mobile forms for adding or updating calendar events.
- **Appointment scheduling** Editors that collect event details, date ranges, and availability.
- **Meeting editors** Workflows for switching between timed and all-day meetings.

## Tutorial

```jsx
const [start, setStart] = React.useState(null);
const [end, setEnd] = React.useState(null);
const [allDay, setAllDay] = React.useState(false);
const [showAs, setShowAs] = React.useState('busy');
const controls = React.useMemo(() => allDay ? ['date'] : ['datetime']);
const controlChange = (ev) => {
    setAllDay(ev.target.checked);
};
const showAsChange = (event) => {
    setShowAs(event.target.value);
};

<Input label="Title" placeholder="Name of the event" />
<Input label="Location" placeholder="Where will it be?" />;
<Switch label="All day" value={allDay} onChange={controlChange} />
<Datepicker
    controls={controls}
    select="range"
    startInput={start}
    endInput={end}
/>
<Input ref={setStart} label="Start" placeholder="Event start" />
<Input ref={setEnd} label="End " placeholder="Event end" />
<SegmentedGroup value={showAs} onChange={showAsChange}>
    <SegmentedItem value="busy">Show as busy</SegmentedItem>
    <SegmentedItem value="free">Show as free</SegmentedItem>
</SegmentedGroup>
<Textarea label="Notes" placeholder="Enter notes, URL, comments" />
```

## 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
- [`onChange`](https://mobiscroll.com/docs/react/forms/switch#event-onChange) - event
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option
- [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - option
- [`startInput`](https://mobiscroll.com/docs/react/datepicker/api#opt-startInput) - option
- [`endInput`](https://mobiscroll.com/docs/react/datepicker/api#opt-endInput) - option

## Code

### JSX

```jsx
import { Datepicker, Input, Page, Segmented, SegmentedGroup, setOptions, Switch, Textarea } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';

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

function App() {
  const [start, setStart] = useState(null);
  const [end, setEnd] = useState(null);
  const [allDay, setAllDay] = useState(false);
  const [showAs, setShowAs] = useState('busy');

  const controls = useMemo(() => (allDay ? ['date'] : ['datetime']), [allDay]);

  const controlChange = useCallback((ev) => {
    setAllDay(ev.target.checked);
  }, []);

  const showAsChange = useCallback((ev) => {
    setShowAs(ev.target.value);
  }, []);

  return (
    <Page>
      <Input label="Title" placeholder="Name of the event" />
      <Input label="Location" placeholder="Where will it be?" />
      <Switch label="All day" value={allDay} onChange={controlChange} />
      <Datepicker controls={controls} select="range" startInput={start} endInput={end} />
      <Input ref={setStart} label="Start" placeholder="Event start" />
      <Input ref={setEnd} label="End " placeholder="Event end" />
      <SegmentedGroup value={showAs} onChange={showAsChange}>
        <Segmented value="busy">Show as busy</Segmented>
        <Segmented value="free">Show as free</Segmented>
      </SegmentedGroup>
      <Textarea label="Notes" placeholder="Enter notes, URL, comments" />
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import {
  Datepicker,
  Input,
  MbscDatepickerControl,
  Page,
  Segmented,
  SegmentedGroup,
  setOptions,
  Switch,
  Textarea,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useMemo, useState } from 'react';

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

const App: FC = () => {
  const [start, setStart] = useState<Input | null>(null);
  const [end, setEnd] = useState<Input | null>(null);
  const [allDay, setAllDay] = useState<boolean>(false);
  const [showAs, setShowAs] = useState<string>('busy');

  const controls = useMemo<MbscDatepickerControl[]>(() => (allDay ? ['date'] : ['datetime']), [allDay]);

  const controlChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
    setAllDay(ev.target.checked);
  }, []);

  const showAsChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
    setShowAs(ev.target.value);
  }, []);

  return (
    <Page>
      <Input label="Title" placeholder="Name of the event" />
      <Input label="Location" placeholder="Where will it be?" />
      <Switch label="All day" value={allDay} onChange={controlChange} />
      <Datepicker controls={controls} select="range" startInput={start} endInput={end} />
      <Input ref={setStart} label="Start" placeholder="Event start" />
      <Input ref={setEnd} label="End " placeholder="Event end" />
      <SegmentedGroup value={showAs} onChange={showAsChange}>
        <Segmented value="busy">Show as busy</Segmented>
        <Segmented value="free">Show as free</Segmented>
      </SegmentedGroup>
      <Textarea label="Notes" placeholder="Enter notes, URL, comments" />
    </Page>
  );
};
export default App;
```

## Implementation notes

- Set `select: 'range'` with `controls: ['datetime']` (or `['date']` for all-day) on a single `Datepicker` instance to collect a start and end date/time pair.
- Bind the picker to two separate fields via `startInput`/`endInput` instead of a single value input: React/Vue pass input element refs, Angular passes template reference variables through `[startInput]`/`[endInput]`, and JS/jQuery pass CSS selector strings (e.g. `'#start'`, `'#end'`).
- Toggling an "all-day" control switches `controls` between `['date']` and `['datetime']` at runtime: JS/jQuery call `.setOptions({ controls: [control] })` on the picker instance; React recomputes the `controls` prop from state; Angular/Vue update the bound `controls` array reactively.
- The picker only manages the date/time range itself - title, location, busy/free, and notes are ordinary form fields with no picker-option equivalent.

## 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: [Rental Availability](https://demo.mobiscroll.com/react/range/book-rental-months-ahead.md) - Build a rental availability calendar with the React date range picker — multi-month view with seasonal pricing display and booking validation.