ImmoSystem24 DS

Datum & Zeit

Deutsch, Montag als Wochenstart, TT.MM.JJJJ, 24 Stunden. Kalendertage sind lokale Tage – keine UTC-Konvertierung.

Calendar
shadcn/ui · calendar (react-day-picker 9)
Oktober 2026
Oktober 2026

Gewählt: 16.10.2026 · Speicherschlüssel: 2026-10-16

Import

import { Calendar } from "@/components/ui/calendar"

Verwendung

  • Locale de und weekStartsOn=1 sind zentral im Calendar gesetzt.
  • Kalendertext 12/16 px.
  • Pfeiltasten bewegen den Fokus, Bild↑/↓ wechselt den Monat.
Einzel-Datumspicker
Komposition

Zwischen 01.01.2020 und 31.12.2027. Probiere „31.02.2026“.

Import

import { DatePicker } from "@/components/compositions/date-picker"

Basis: offizielles Date-Picker-Rezept (Popover + Calendar), input-group

Verwendung

  • Manuelle Eingabe TT.MM.JJJJ, Enter oder Verlassen übernimmt.
  • Monat/Jahr per Auswahlfeld im Kalender.
  • Grenzen min/max sperren Tage und prüfen die Eingabe.
Zeitraum mit Presets
Komposition
Referenz: Popover 733 px, Radius 12, Padding 8, Rahmen rgba(6,3,20,.17), Schatten 0 6px 14px rgba(6,3,20,.10); zwei Monate à 245 px mit 32 px Gap. Mobil ein Monat, eine Spalte.
Zeitraum
Kein Zeitraum

Import

import { DateRangePicker } from "@/components/compositions/date-picker"

Basis: popover, calendar mode=range, button, input

Verwendung

  • Acht Presets; Auswahl wird erst mit „Übernehmen“ wirksam.
  • Escape verwirft Änderungen.
  • Enddatum vor Startdatum zeigt einen Fehler und blockiert das Übernehmen.
Uhrzeit (24 h)
Komposition
Abweichung vom Rezept: statt <input type="time"> ein Texteingabefeld HH:MM, weil der Browser sonst je nach System 12-Stunden-Format zeigt.

Import

import { TimeInput } from "@/components/compositions/date-picker"

Basis: input-group

Verwendung

  • Ziffern eingeben, Doppelpunkt wird ergänzt (0930 → 09:30).
  • Gültig 00:00–23:59.
Made by Loui Augst