# React Bootstrap Datepicker

A React Bootstrap datepicker with Vanilla Calendar Pro in AdminKit: an inline calendar, and in PRO a date, range and time picker on a form input.

A date picker lets people choose a date from a calendar instead of typing it. `VanillaCalendar` brings [Vanilla Calendar Pro](https://vanilla-calendar.pro/) 3 to [AdminKit for React](/react/). In the free version it draws an inline calendar, as on the Analytics dashboard. In AdminKit PRO it can also open as a date picker from a Bootstrap input, with an optional time picker.

The calendar follows the page's light or dark color mode. AdminKit sets `selectedTheme: "system"` and `themeAttrDetect: "html[data-bs-theme]"` before your options. Vanilla Calendar Pro loads only where it is needed: the component imports it with a dynamic `import()` once the calendar is on the page. Vite puts it in its own chunk, so pages without a calendar never load it.

## Example

```html
<div id="calendarInline"></div>

<script>
new VanillaCalendar.Calendar(document.querySelector("#calendarInline"), {
  selectedTheme: "system",
  themeAttrDetect: "html[data-bs-theme]",
  selectedDates: [new Date()],
  enableJumpToSelectedDate: true,
  firstWeekday: 0,
}).init();
</script>
```
```tsx code
import { useState } from "react";
import { VanillaCalendar } from "@/components/plugins/vanilla-calendar";

export function TodayCalendar() {
  const [today] = useState(() => new Date());

  return (
    <VanillaCalendar
      options={{
        selectedDates: [today],
        enableJumpToSelectedDate: true,
        firstWeekday: 0,
      }}
    />
  );
}
```

`firstWeekday: 0` starts the week on Sunday. The [Vanilla Calendar Pro docs](https://vanilla-calendar.pro/) list every option.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `VanillaCalendarOptions` | | Vanilla Calendar Pro's options; read once, when the calendar is created |
| `input` | `boolean` | `false` | PRO: render a read-only `<input>` that opens the calendar as a popup (`inputMode`) |
| `time` | `boolean` | `false` | PRO: add the time picker extension |

Other props, such as `className`, `id` and `placeholder`, go to the `<div>`, or to the `<input>` with `input`. Changing `options` later has no effect. To create the calendar again, give the component a new `key`. In PRO, changing `input` or `time` creates it again. The component is in `src/components/plugins/vanilla-calendar.tsx`.

## Date picker

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

For a date field in a form, set `input`. The component then renders `<input type="text" readOnly>`, and the calendar opens as a popup from it. You decide what the input shows. The Advanced Inputs demo writes the text in `onChangeToInput`, which the calendar calls when the selection changes.

```html
<div style="min-height: 22rem">
  <label class="form-label" for="datepickerDue">Due date</label>
  <input type="text" class="form-control" id="datepickerDue" placeholder="Select date.." readonly>
</div>

<script>
new VanillaCalendar.Calendar(document.querySelector("#datepickerDue"), {
  selectedTheme: "system",
  themeAttrDetect: "html[data-bs-theme]",
  inputMode: true,
  firstWeekday: 0,
  onChangeToInput(self) {
    if (self.context.inputElement) {
      self.context.inputElement.value = self.context.selectedDates[0] ?? "";
      self.hide();
    }
  },
}).init();
</script>
```
```tsx code
import {
  VanillaCalendar,
  type VanillaCalendarOptions,
} from "@/components/plugins/vanilla-calendar";

const dueDate: VanillaCalendarOptions = {
  firstWeekday: 0,
  onChangeToInput(self) {
    if (self.context.inputElement) {
      self.context.inputElement.value = self.context.selectedDates[0] ?? "";
      self.hide();
    }
  },
};

export function DueDateField() {
  return (
    <>
      <label className="form-label" htmlFor="datepickerDue">Due date</label>
      <VanillaCalendar
        input
        id="datepickerDue"
        className="form-control"
        placeholder="Select date.."
        options={dueDate}
      />
    </>
  );
}
```

`selectedDates` holds dates as `"YYYY-MM-DD"` strings. Give the input a `name` to submit the text with the form.

## Ranges, multiple dates and time

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

Some fields need several dates, a range or a time. The demo builds these pickers from the same pattern:

| Picker | Props and options |
| --- | --- |
| Date and time | `time`, `selectionTimeMode: 24`; write `` `${date} ${self.context.selectedTime}` `` |
| Several dates | `selectionDatesMode: "multiple"`; write `selectedDates.join(", ")` |
| Date range | `selectionDatesMode: "multiple-ranged"`; write the first and last of `selectedDates` |
| Time only | `time`, `selectionTimeMode: 24`, `selectionDatesMode: false`, `layouts: { default: "<#ControlTime />" }`; write `selectedTime` |

A range picker:

```tsx
const range: VanillaCalendarOptions = {
  firstWeekday: 0,
  selectionDatesMode: "multiple-ranged",
  onChangeToInput(self) {
    const dates = self.context.selectedDates;
    if (self.context.inputElement) {
      self.context.inputElement.value = dates.length
        ? `${dates[0]} to ${dates[dates.length - 1]}`
        : "";
    }
  },
};

<VanillaCalendar input className="form-control" placeholder="Select dates.." options={range} />
```

## Accessibility

- Give the date picker a `<label htmlFor>` that matches the `id` you pass to `VanillaCalendar`, as above.
- The input is `readOnly`, so dates are picked in the calendar, not typed. Read-only inputs skip the browser's constraint validation, so `required` has no effect on them: check the value in your submit handler.
- Show the expected format in the placeholder or in help text, since the input text is whatever `onChangeToInput` writes.

## Related

- [Next.js date picker](/nextjs/docs/forms/date-picker/): the same component in AdminKit for Next.js
- [Bootstrap 5 datepicker](/bootstrap/docs/forms/date-picker/): the date picker of the HTML version
- [Calendar](/react/docs/plugins/calendar/): the FullCalendar event calendar
- [Form controls](/react/docs/forms/form-control/): inputs and textareas
- [Advanced Inputs demo](https://react-demo.adminkit.io/forms-advanced-inputs)

---

Canonical HTML page: https://adminkit.io/react/docs/forms/date-picker/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io