shadcn calendar and date picker: dates, state and time zones

Short answer: the shadcn Calendar is react-day-picker wrapped in a component you own, and the date picker is that calendar inside a Popover. The value you store is a YYYY-MM-DD string, not a Date.

What the command adds

The CLI copies calendar.tsx and popover.tsx into components/ui, adds react-day-picker and date-fns to the dependencies and touches nothing else. From then on the file is yours: shadcn updates never arrive.

npx shadcn@latest add calendar popover button

The field, not just the grid

A calendar on its own is not a field: the readable value, the placeholder and the link to the form are missing. The pattern is an outline Button that shows the formatted date and opens the calendar.

"use client";

import { useState } from "react";
import { format } from "date-fns";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export function DateField({ name, label }: { name: string; label: string }) {
  const [value, setValue] = useState("");
  // Local midnight, not UTC midnight: the string is a day, not an instant.
  const selected = value ? new Date(value + "T00:00:00") : undefined;

  return (
    
      
      
        
          
            {selected ? format(selected, "PPP") : "Scegli una data"}
          
        
        
           setValue(day ? format(day, "yyyy-MM-dd") : "")}
          />
        
      
    
  );
}

The string, not a Date object

The value that crosses the form is a string: 2026-11-01 is the same day in Milan, in New York and on the server. A Date carries an instant instead, and the instant depends on the time zone of whoever creates it.

The three variants that cover almost everything

• Single date: mode="single", the case of a filter, a deadline and a form field.
• Range: mode="range" with numberOfMonths={2} for billing periods.
• Blocked days: disabled={{ before: new Date() }} closes the past, disabled={{ dayOfWeek: [0, 6] }} closes weekends.

Source: the shadcn/ui Calendar page (MIT licence) and the react-day-picker repository (MIT licence); the PPP and yyyy-MM-dd formats come from date-fns, also MIT.

A named limitation

The calendar draws days in the browser time zone, and the server has none. While the value stays a string the two agree; as soon as you write new Date("2026-11-01") on a server west of Greenwich, JavaScript reads UTC midnight and the day steps back by one. A second limit: blocked days are interface, not a rule. A user can still submit the Sunday you closed, so validation has to run again on the server.

Where to continue

In the catalogue you find the shadcn library, a calendar block with preview and the form category blocks. To understand what you are installing, read what shadcn/ui is and how to theme shadcn; the comparison of ready-made themes is free versus premium shadcn themes. When the date comes from the server and React complains, the cause is in hydration mismatches on dates; for long lists the sibling of this article is a searchable select.