Date picker.

Give your next idea a date.

In practice

Controlled: supply value and onValueChange. Selection closes the popover. Set label for the field purpose.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { DatePicker } from "@chlohal/coal-ui";
export default function Example() {
    const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 8, 12));
    return (<DatePicker value={date} onValueChange={setDate} label="Project deadline"/>);
}

Source

The original Coal implementation. Use the package export to integrate it.

"use client";
import * as React from "react";
import { Calendar } from "./calendar.js";
import { Popover, PopoverTrigger, PopoverContent } from "./popover.js";
import { Button } from "./button.js";
export type DatePickerProps = {
  value?: Date;
  onValueChange: (date: Date | undefined) => void;
  label?: string;
  disabled?: boolean;
  locale?: string;
  name?: string;
};
export function DatePicker({
  value,
  onValueChange,
  label = "Choose a date",
  disabled,
  locale = "en-GB",
  name,
}: DatePickerProps) {
  const [open, setOpen] = React.useState(false);
  return (
    <Popover open={open} onOpenChange={setOpen}>
      {name && (
        <input
          type="hidden"
          name={name}
          value={
            value
              ? `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`
              : ""
          }
        />
      )}
      <PopoverTrigger
        disabled={disabled}
        render={<Button variant="outline" />}
        aria-label={
          value ? `${label}: ${value.toLocaleDateString(locale)}` : label
        }
      >
        {value
          ? value.toLocaleDateString(locale, {
              day: "numeric",
              month: "short",
              year: "numeric",
            })
          : label}
        <span aria-hidden="true">⌄</span>
      </PopoverTrigger>
      <PopoverContent aria-label={label}>
        <Calendar
          mode="single"
          selected={value}
          defaultMonth={value}
          autoFocus
          onSelect={(date) => {
            onValueChange(date);
            setOpen(false);
          }}
        />
      </PopoverContent>
    </Popover>
  );
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.