React Bootstrap Datepicker

A date picker lets people choose a date from a calendar instead of typing it. VanillaCalendar brings Vanilla Calendar Pro 3 to AdminKit for 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.

ExampleCopy Anchor Link

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 list every option.

PropsCopy Anchor Link

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 pickerCopy Anchor Link

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.

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 timeCopy Anchor Link

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

A range picker:

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} />

AccessibilityCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• Next.js date picker: the same component in AdminKit for Next.js
• Bootstrap 5 datepicker: the date picker of the HTML version
• Calendar: the FullCalendar event calendar
• Form controls: inputs and textareas
• Advanced Inputs demo