Date pickers

import { useState } from 'react';
import { DatePicker } from '@kyralabs/m3exp-web/react';

const AUG_17_2025 = Date.UTC(2025, 7, 17);

export default function Calendar() {
  const [date, setDate] = useState<number | null>(AUG_17_2025);
  return (
    <div>
      <DatePicker
        selectedDateMillis={date}
        onSelectedDateChange={setDate}
        defaultDisplayMode="picker"
      />
      <p>Selected: {date === null ? 'none' : new Date(date).toISOString().slice(0, 10)}</p>
    </div>
  );
}

<m3e-date-picker id="calendar" value="2025-08-17" displayed-month="2025-08"></m3e-date-picker>
<p>Selected: <output id="calendar-value">2025-08-17</output></p>
<script>
  document.getElementById('calendar').addEventListener('change', (event) => {
    document.getElementById('calendar-value').textContent = event.detail.value ?? 'none';
  });
</script>

import { useState } from 'react';
import { Button, DatePicker, DatePickerDialog } from '@kyralabs/m3exp-web/react';

const AUG_17_2025 = Date.UTC(2025, 7, 17);
const iso = (millis: number | null) =>
  millis === null ? 'none' : new Date(millis).toISOString().slice(0, 10);

export default function Dialog() {
  const [open, setOpen] = useState(false);
  const [date, setDate] = useState<number | null>(AUG_17_2025);
  const [draft, setDraft] = useState<number | null>(date);
  return (
    <>
      <Button
        variant="tonal"
        onPress={() => {
          setDraft(date);
          setOpen(true);
        }}
      >
        Pick a date
      </Button>
      <p>Date: {iso(date)}</p>
      <DatePickerDialog
        aria-label="Select date"
        isOpen={open}
        onOpenChange={setOpen}
        dismissButton={
          <Button
            variant="text"
            onPress={() => {
              setOpen(false);
            }}
          >
            Cancel
          </Button>
        }
        confirmButton={
          <Button
            variant="text"
            isDisabled={draft === null}
            onPress={() => {
              setDate(draft);
              setOpen(false);
            }}
          >
            OK
          </Button>
        }
      >
        <DatePicker
          selectedDateMillis={draft}
          onSelectedDateChange={setDraft}
          displayedMonthMillis={draft ?? AUG_17_2025}
        />
      </DatePickerDialog>
    </>
  );
}

<button type="button" id="open-date" class="m3e-button m3e-button--tonal">Pick a date</button>
<p>Date: <output id="date-value">2025-08-17</output></p>
<m3e-dialog id="date-dialog" variant="custom" label="Select date">
  <div class="m3e-date-picker-dialog">
    <div class="m3e-date-picker-dialog__content">
      <m3e-date-picker value="2025-08-17" displayed-month="2025-08"></m3e-date-picker>
    </div>
    <div class="m3e-date-picker-dialog__actions">
      <button type="button" class="m3e-button m3e-button--text" data-action="cancel">Cancel</button>
      <button type="button" class="m3e-button m3e-button--text" data-action="ok">OK</button>
    </div>
  </div>
</m3e-dialog>
<script>
  const dialog = document.getElementById('date-dialog');
  const picker = dialog.querySelector('m3e-date-picker');
  const output = document.getElementById('date-value');
  document.getElementById('open-date').addEventListener('click', () => {
    picker.value = output.textContent;
    dialog.show();
  });
  dialog.addEventListener('click', (event) => {
    const action = event.target.closest('[data-action]')?.dataset.action;
    if (action === 'ok') output.textContent = picker.value ?? 'none';
    if (action) dialog.close();
  });
</script>

import { useState } from 'react';
import { Button, DateRangePicker, FullScreenDialog } from '@kyralabs/m3exp-web/react';

const AUG_2025 = Date.UTC(2025, 7, 1);
const iso = (millis: number | null) =>
  millis === null ? '…' : new Date(millis).toISOString().slice(0, 10);

export default function Range() {
  const [open, setOpen] = useState(false);
  const [range, setRange] = useState<[number | null, number | null]>([null, null]);
  const [draft, setDraft] = useState(range);
  return (
    <>
      <Button
        variant="tonal"
        onPress={() => {
          setDraft(range);
          setOpen(true);
        }}
      >
        Pick dates
      </Button>
      <p>
        Trip: {iso(range[0])} – {iso(range[1])}
      </p>
      <FullScreenDialog
        aria-label="Select dates"
        isOpen={open}
        onOpenChange={setOpen}
        action={
          <Button
            variant="text"
            isDisabled={draft[1] === null}
            onPress={() => {
              setRange(draft);
              setOpen(false);
            }}
          >
            Save
          </Button>
        }
      >
        <DateRangePicker
          selectedStartDateMillis={draft[0]}
          selectedEndDateMillis={draft[1]}
          onSelectedRangeChange={(start, end) => {
            setDraft([start, end]);
          }}
          displayedMonthMillis={AUG_2025}
        />
      </FullScreenDialog>
    </>
  );
}

<button type="button" id="open-range" class="m3e-button m3e-button--tonal">Pick dates</button>
<p>Trip: <output id="range-value">… – …</output></p>
<m3e-dialog id="range-dialog" variant="full-screen" label="Select dates">
  <m3e-date-range-picker displayed-month="2025-08"></m3e-date-range-picker>
  <button type="button" class="m3e-button m3e-button--text" slot="actions">Save</button>
</m3e-dialog>
<script>
  const dialog = document.getElementById('range-dialog');
  const picker = dialog.querySelector('m3e-date-range-picker');
  document.getElementById('open-range').addEventListener('click', () => dialog.show());
  dialog.querySelector('[slot="actions"]').addEventListener('click', () => {
    document.getElementById('range-value').textContent =
      `${picker.start ?? '…'} – ${picker.end ?? '…'}`;
    dialog.close();
  });
</script>

import { DockedDatePicker } from '@kyralabs/m3exp-web/react';

export default function Docked() {
  return <DockedDatePicker label="Departure" defaultSelectedDateMillis={Date.UTC(2025, 7, 17)} />;
}

<m3e-docked-date-picker label="Departure" value="2025-08-17"></m3e-docked-date-picker>