DatePicker

const datePickerFixture = {
  id: "datepicker",
  label: "Kickoff date",
  // Pinned for the same reason as calendarFixture: the trigger's mono readout
  // and the popover's today-ring must not move with the wall clock.
  selectedIsoDay: "2026-06-21",
  todayIsoDay: "2026-06-21",
} satisfies {
  id: string;
  label: string;
  selectedIsoDay: string;
  todayIsoDay: string;
};
 
/**
 * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
 * adapters take.
 *
 * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
 * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
 * are `Date`-valued — so the conversion lives here, once, instead of five
 * `new Date(...)` literals drifting apart in five demo files.
 *
 * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
 * is parsed as UTC midnight, which renders as the 17th everywhere west of
 * Greenwich, so the demo month grid would highlight a different day depending
 * on the reader's timezone. Field-by-field construction pins the rendered
 * year/month/day in every timezone, forever.
 */
function isoDayToDate(isoDay: string): Date {
  const [year, month, day] = isoDay.split("-").map(Number);
  return new Date(year!, month! - 1, day!);
}
 
import { DatePicker } from "@grassroot/ui-react";
 
export default function DatePickerDemo() {
  return (
    <div>
      <DatePicker
        id={`${datePickerFixture.id}-react`}
        label={datePickerFixture.label}
        defaultValue={isoDayToDate(datePickerFixture.selectedIsoDay)}
        today={isoDayToDate(datePickerFixture.todayIsoDay)}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const datePickerFixture = {
  id: "datepicker",
  label: "Kickoff date",
  // Pinned for the same reason as calendarFixture: the trigger's mono readout
  // and the popover's today-ring must not move with the wall clock.
  selectedIsoDay: "2026-06-21",
  todayIsoDay: "2026-06-21",
} satisfies {
  id: string;
  label: string;
  selectedIsoDay: string;
  todayIsoDay: string;
};
 
/**
 * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
 * adapters take.
 *
 * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
 * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
 * are `Date`-valued — so the conversion lives here, once, instead of five
 * `new Date(...)` literals drifting apart in five demo files.
 *
 * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
 * is parsed as UTC midnight, which renders as the 17th everywhere west of
 * Greenwich, so the demo month grid would highlight a different day depending
 * on the reader's timezone. Field-by-field construction pins the rendered
 * year/month/day in every timezone, forever.
 */
function isoDayToDate(isoDay: string): Date {
  const [year, month, day] = isoDay.split("-").map(Number);
  return new Date(year!, month! - 1, day!);
}
 
import { DatePicker } from "@grassroot/ui-vue";
const selected = ref(isoDayToDate(datePickerFixture.selectedIsoDay));
const today = isoDayToDate(datePickerFixture.todayIsoDay);
</script>
<template>
  <div>
    <DatePicker
      v-model="selected"
      :id="`${datePickerFixture.id}-vue`"
      :label="datePickerFixture.label"
      :today="today"
    />
  </div>
</template>

import { Component } from "@angular/core";
const datePickerFixture = {
  id: "datepicker",
  label: "Kickoff date",
  // Pinned for the same reason as calendarFixture: the trigger's mono readout
  // and the popover's today-ring must not move with the wall clock.
  selectedIsoDay: "2026-06-21",
  todayIsoDay: "2026-06-21",
} satisfies {
  id: string;
  label: string;
  selectedIsoDay: string;
  todayIsoDay: string;
};
 
/**
 * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
 * adapters take.
 *
 * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
 * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
 * are `Date`-valued — so the conversion lives here, once, instead of five
 * `new Date(...)` literals drifting apart in five demo files.
 *
 * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
 * is parsed as UTC midnight, which renders as the 17th everywhere west of
 * Greenwich, so the demo month grid would highlight a different day depending
 * on the reader's timezone. Field-by-field construction pins the rendered
 * year/month/day in every timezone, forever.
 */
function isoDayToDate(isoDay: string): Date {
  const [year, month, day] = isoDay.split("-").map(Number);
  return new Date(year!, month! - 1, day!);
}
 
import { GrassrootDatePicker } from "@grassroot/ui-angular";
@Component({
  selector: "app-date-picker-demo",
  standalone: true,
  imports: [GrassrootDatePicker],
  template: `<div>
    <grassroot-date-picker
      [id]="id"
      [label]="fixture.label"
      [defaultValue]="selected"
      [today]="today"
    />
  </div>`,
})
export class DatePickerDemoComponent {
  protected readonly fixture = datePickerFixture;
  protected readonly id = `${datePickerFixture.id}-angular`;
  protected readonly selected = isoDayToDate(datePickerFixture.selectedIsoDay);
  protected readonly today = isoDayToDate(datePickerFixture.todayIsoDay);
}
export default DatePickerDemoComponent;

<script lang="ts">
  const datePickerFixture = {
    id: "datepicker",
    label: "Kickoff date",
    // Pinned for the same reason as calendarFixture: the trigger's mono readout
    // and the popover's today-ring must not move with the wall clock.
    selectedIsoDay: "2026-06-21",
    todayIsoDay: "2026-06-21",
  } satisfies {
    id: string;
    label: string;
    selectedIsoDay: string;
    todayIsoDay: string;
  };
 
  /**
   * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
   * adapters take.
   *
   * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
   * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
   * are `Date`-valued — so the conversion lives here, once, instead of five
   * `new Date(...)` literals drifting apart in five demo files.
   *
   * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
   * is parsed as UTC midnight, which renders as the 17th everywhere west of
   * Greenwich, so the demo month grid would highlight a different day depending
   * on the reader's timezone. Field-by-field construction pins the rendered
   * year/month/day in every timezone, forever.
   */
  function isoDayToDate(isoDay: string): Date {
    const [year, month, day] = isoDay.split("-").map(Number);
    return new Date(year!, month! - 1, day!);
  }
 
  import { DatePicker } from "@grassroot/ui-svelte";
</script>
 
<div>
  <DatePicker
    id={`${datePickerFixture.id}-svelte`}
    label={datePickerFixture.label}
    defaultValue={isoDayToDate(datePickerFixture.selectedIsoDay)}
    today={isoDayToDate(datePickerFixture.todayIsoDay)}
  />
</div>

/** @jsxImportSource solid-js */
const datePickerFixture = {
  id: "datepicker",
  label: "Kickoff date",
  // Pinned for the same reason as calendarFixture: the trigger's mono readout
  // and the popover's today-ring must not move with the wall clock.
  selectedIsoDay: "2026-06-21",
  todayIsoDay: "2026-06-21",
} satisfies {
  id: string;
  label: string;
  selectedIsoDay: string;
  todayIsoDay: string;
};
 
/**
 * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
 * adapters take.
 *
 * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
 * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
 * are `Date`-valued — so the conversion lives here, once, instead of five
 * `new Date(...)` literals drifting apart in five demo files.
 *
 * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
 * is parsed as UTC midnight, which renders as the 17th everywhere west of
 * Greenwich, so the demo month grid would highlight a different day depending
 * on the reader's timezone. Field-by-field construction pins the rendered
 * year/month/day in every timezone, forever.
 */
function isoDayToDate(isoDay: string): Date {
  const [year, month, day] = isoDay.split("-").map(Number);
  return new Date(year!, month! - 1, day!);
}
 
import { DatePicker } from "@grassroot/ui-solid";
export default function DatePickerDemo() {
  return (
    <div>
      <DatePicker
        id={`${datePickerFixture.id}-solid`}
        label={datePickerFixture.label}
        defaultValue={isoDayToDate(datePickerFixture.selectedIsoDay)}
        today={isoDayToDate(datePickerFixture.todayIsoDay)}
      />
    </div>
  );
}