DatePicker

A DateField with a button that opens a Calendar.

<script>
  import { $bind, $signal } from 'brumate/signals';
  import Button from '@brumate/ui/Button.brm';
  import Calendar from '@brumate/ui/Calendar.brm';
  import CalendarGrid from '@brumate/ui/CalendarGrid.brm';
  import CalendarHeading from '@brumate/ui/CalendarHeading.brm';
  import DateInput from '@brumate/ui/DateInput.brm';
  import DatePicker from '@brumate/ui/DatePicker.brm';
  import Dialog from '@brumate/ui/Dialog.brm';
  import Group from '@brumate/ui/Group.brm';
  import Label from '@brumate/ui/Label.brm';
  import Popover from '@brumate/ui/Popover.brm';

  let departure = $signal<string | null>(null);
</script>

<DatePicker class="ui-field" value=$bind(departure)>
  <Label>Departure</Label>
  <Group class="ui-group">
    <DateInput class="ui-input ui-date-input" />
    <Button class="ui-button ui-icon-button" aria-label="Calendar">▾</Button>
  </Group>
  <Popover class="ui-popover">
    <Dialog>
      <Calendar class="ui-calendar">
        <header>
          <Button slot="previous" class="ui-button ui-icon-button">‹</Button>
          <CalendarHeading />
          <Button slot="next" class="ui-button ui-icon-button">›</Button>
        </header>
        <CalendarGrid />
      </Calendar>
    </Dialog>
  </Popover>
</DatePicker>
<p>{departure ?? 'No date yet.'}</p>

<DatePicker value=$bind(departure)>
  <Label>Departure</Label>
  <Group>
    <DateInput />
    <Button>▾</Button>
  </Group>
  <Popover>
    <Dialog>
      <Calendar>
        <header>
          <Button slot="previous">‹</Button>
          <CalendarHeading />
          <Button slot="next">›</Button>
        </header>
        <CalendarGrid />
      </Calendar>
    </Dialog>
  </Popover>
</DatePicker>

• A DatePicker holds a Label, a Group with a DateInput and a Button, and a Popover with a Dialog and a Calendar. A Text with slot="description" and a FieldError work as in a DateField.
• value is the date as a YYYY-MM-DD string, or null. It starts its own state, or binds with $bind. See State.
• onChange gets each change, whether it is typed or picked.
• The other props are those of DateField, such as name, minValue, maxValue and isDateUnavailable.
• It shows data-open, and the states of a DateField.

The Calendar

• The Button opens the Popover. The Calendar shows the date of the field, or placeholderValue when the field is empty, and that date takes focus.
• A Dialog with no Heading is named by the Button and the Label. The Group is named by the Label.
• The Calendar follows isDisabled and isReadOnly of the DatePicker, unless it has its own.
• A pick sets the date and closes the Popover, and focus goes back to the Button. shouldCloseOnSelect={false} keeps it open.
• The Calendar follows minValue, maxValue and isDateUnavailable of the DatePicker, unless it has its own.
• Escape closes the Popover.
• isOpen is whether the Popover shows. It starts its own state, or binds with $bind, and onOpenChange gets each change.