Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Calendar with Month and Year Selector in Dialog for Ark UI

A Select Date button that opens a calendar whose caption is month and year dropdowns, with no previous or next arrows.

Select Date opens a dialog with that title. The caption is a month dropdown and a year dropdown. There are no previous or next arrows.

Use it when a far date should be picked without paging month by month. Leave the grid on the page if people live in it. A Date Picker hides the same caption in a field. In React, Ark UI does not remember which year you wanted.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Calendar anatomy: prev trigger, month select, year select, next trigger, table, table cell

Usage

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Select Date</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-fit">
    <DialogHeader>
      <DialogTitle>Select Date</DialogTitle>
    </DialogHeader>
    <Calendar
      className="rounded-md border"
      focusedValue={focusedValue}
      onFocusChange={handleFocusChange}
      onValueChange={handleValueChange}
      value={value}
    >
      <CalendarViewControl className="gap-2">
        <Select
          className="flex-1"
          collection={monthCollection}
          onValueChange={handleMonthChange}
          value={[String(focusedValue.month)]}
        >
          <SelectTrigger aria-label="Month" className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {monthCollection.items.map((item) => (
                <SelectItem item={item} key={item.value}>
                  {item.label}
                </SelectItem>
{/* The rest of the file is under Installation. */}

FAQ

How do the month and year dropdowns work?

The control row is two Selects in CalendarViewControl. The month select calls focusedValue.set({ month }), the year select calls focusedValue.set({ year }), and focusedValue with onFocusChange moves the grid.

Where is the dialog in this file?

DialogTrigger opens DialogContent with sm:max-w-fit. The calendar, including both selects, sits under a DialogTitle that reads Select Date.

How do I read the selected date?

value is a list holding the selected date, and onValueChange receives { value }. This demo starts the list from parseDate(new Date()).

Which years are in the year dropdown?

The year Select lists 101 years, from 100 years ago through the current year. Choosing one calls focusedValue.set({ year }).

Can the visible month differ from the selected date?

Yes. value is the selected date, and focusedValue is the month on screen. Changing a dropdown updates focusedValue only.

What does the button say?

The trigger button reads Select Date, and DialogTitle repeats Select Date.

API Reference

Dialog

Sets asChild. The rest is on the Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Calendar

Sets focusedValue={focusedValue}, onFocusChange={handleFocusChange}, onValueChange={handleValueChange} and value={value}. The rest is on the Calendar page.

Select

Sets collection={monthCollection}, onValueChange={handleMonthChange}, value={[String(focusedValue.month)]}, aria-label="Month", item={item} and collection={yearCollection}. The rest is on the Select page.

All 16 calendar examples