Date range picker

import { Tag } from "@clawscale/react";
import { type DateRange, DateRangePicker } from "@clawscale/react/datetime";
import { useState } from "react";

const pad = (n: number) => String(n).padStart(2, "0");
const isoDate = (date: Date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;

function describe([start, end]: DateRange) {
  if (!start || !end) return "Pick the first and last day of the incident";
  const days = Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1;
  return `Incident window: ${isoDate(start)} to ${isoDate(end)}, ${days} days`;
}

export default function DateRangePickerBasic() {
  const [range, setRange] = useState<DateRange>([new Date(2026, 6, 20), new Date(2026, 6, 26)]);
  return (
    <div style={{ display: "grid", gap: 12, justifyItems: "center" }}>
      <DateRangePicker shortcuts={false} value={range} onChange={setRange} />
      <Tag minimal>{describe(range)}</Tag>
    </div>
  );
}

import { type DateRange, DateRangePicker, type DateRangeShortcut } from "@clawscale/react/datetime";

function lastDays(days: number): DateRange {
  const end = new Date();
  const start = new Date(end.getFullYear(), end.getMonth(), end.getDate() - days + 1);
  return [start, end];
}

export default function DateRangePickerShortcuts() {
  const shortcuts: DateRangeShortcut[] = [
    { label: "Last 7 days", dateRange: lastDays(7) },
    { label: "Last 30 days", dateRange: lastDays(30) },
    { label: "Last 90 days", dateRange: lastDays(90) },
  ];
  return <DateRangePicker shortcuts={shortcuts} defaultValue={[new Date(2026, 6, 20), new Date(2026, 6, 26)]} />;
}

import { DateRangePicker } from "@clawscale/react/datetime";

export default function DateRangePickerSingleMonth() {
  return (
    <DateRangePicker singleMonthOnly shortcuts={false} defaultValue={[new Date(2026, 7, 22), new Date(2026, 7, 23)]} />
  );
}

import { DateRangePicker } from "@clawscale/react/datetime";

// A change freeze can cover a single release day.
export default function DateRangePickerSingleDay() {
  return (
    <DateRangePicker
      allowSingleDayRange
      singleMonthOnly
      defaultValue={[new Date(2026, 7, 17), new Date(2026, 7, 17)]}
    />
  );
}