DateField

A date field with ranges, presets, a clear button and the time of day, as uikit:DateField.

<Panel MinHeight="360">
  <uikit:DateField Width="220" Date="2025-03-14" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Panel>

#Usage

uikit:DateField is the field and popup of the Date Picker with a uikit:CalendarView inside, plus ranges, presets, a clear button and the time of day. It shows the value as yyyy/MM/dd (and the time, when it is edited) unless DateFormat sets a .NET format, and PlaceholderText ("Select date" by default) without a value. A click on the field opens the popup; Enter opens and closes it, and Escape closes it. Picking a day sets Date, closes the popup and raises Changed.

With IsRange="True" the popup selects a range, and the field takes Date and EndDate once the second day is picked. NumberOfMonths shows several months in the popup. Presets are buttons beside the calendar: each uikit:DateRangePreset has a Label and a Date, with an EndDate for a range. IsCleanable="True" replaces the icon with a clear button while there is a value; Delete and Backspace also clear a focused field.

TimePrecision (Minute or Second) adds a uikit:TimeField below the calendar, on the clock HourCycle picks (H23 or H12). Picking a day then keeps the popup open and every change applies at once; picking the selected day again closes it. DefaultTime is the time a picked day starts with. A range edits dates only.

The disabled days (DisabledDaysOfWeek, DisabledDates, DisabledMatcher) and FirstDayOfWeek pass to the calendar. The plain class drops the field's frame and focus ring, for a field inside another surface.

#Examples

A range over two months, with presets.

<Panel MinHeight="360">
  <uikit:DateField Width="260" IsRange="True" NumberOfMonths="2" IsCleanable="True"
                   Date="2025-03-07" EndDate="2025-03-14"
                   HorizontalAlignment="Left" VerticalAlignment="Top">
    <uikit:DateField.Presets>
      <uikit:DateRangePreset Label="Last 7 Days" Date="2025-03-07" EndDate="2025-03-14" />
      <uikit:DateRangePreset Label="Last 14 Days" Date="2025-02-28" EndDate="2025-03-14" />
      <uikit:DateRangePreset Label="Last 30 Days" Date="2025-02-12" EndDate="2025-03-14" />
    </uikit:DateField.Presets>
  </uikit:DateField>
</Panel>

A date with its time, to the minute and to the second.

<Panel MinHeight="420">
  <WrapPanel ItemSpacing="12" LineSpacing="12" VerticalAlignment="Top">
    <uikit:DateField Width="220" TimePrecision="Minute" Date="2025-03-14 09:30" />
    <uikit:DateField Width="240" TimePrecision="Second" HourCycle="H12" DefaultTime="09:00"
                     IsCleanable="True" PlaceholderText="12-hour clock" />
  </WrapPanel>
</Panel>

Presets, disabled weekends and the plain class.

<Panel MinHeight="360">
  <WrapPanel ItemSpacing="12" LineSpacing="12" VerticalAlignment="Top">
    <uikit:DateField Width="220" Date="2025-03-14" IsCleanable="True" DisabledDaysOfWeek="Sunday, Saturday">
      <uikit:DateField.Presets>
        <uikit:DateRangePreset Label="Yesterday" Date="2025-03-13" />
        <uikit:DateRangePreset Label="Last Week" Date="2025-03-07" />
        <uikit:DateRangePreset Label="Last Month" Date="2025-02-12" />
      </uikit:DateField.Presets>
    </uikit:DateField>
    <uikit:DateField Width="220" Classes="plain" Date="2025-03-14" />
  </WrapPanel>
</Panel>