DateField

带范围、预设、清除按钮与时间的日期字段，即 uikit:DateField。

示例可交互

DateField — Avalonia UIKit

Live demo unavailable

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

用法

uikit:DateField 是 Date Picker 的字段与弹出层，内嵌 uikit:CalendarView，并额外提供范围、预设、清除按钮与时间。它把值显示为 yyyy/MM/dd（编辑时间时还会显示时间），除非 DateFormat 指定了 .NET 格式；无值时显示 PlaceholderText（默认为 Select date）。点击字段会打开弹出层；Enter 打开并关闭，Escape 关闭。选择某一天会设置 Date、关闭弹出层并引发 Changed。

设置 IsRange="True" 后，弹出层用于选择范围，选好第二天后字段会接收 Date 与 EndDate。NumberOfMonths 在弹出层中显示多个月份。Presets 是日历旁的按钮：每个 uikit:DateRangePreset 有 Label 与 Date，范围预设还带 EndDate。有值时 IsCleanable="True" 以清除按钮替代图标；Delete 与 Backspace 也能清除处于焦点状态的字段。

TimePrecision（Minute 或 Second）会在日历下方添加一个 uikit:TimeField，其时钟由 HourCycle 选择（H23 或 H12）。此时选择某一天后弹出层保持打开，每处修改立即生效；再次选中已选的那一天则关闭。DefaultTime 是选中日期起始使用的时间。范围只编辑日期。

禁用的日期（DisabledDaysOfWeek、DisabledDates、DisabledMatcher）与 FirstDayOfWeek 会传递给日历。plain 样式类去掉字段的边框与焦点环，适用于位于其他表面之内的字段。

示例

跨两个月的范围，并带预设。

范围与预设可交互

Live demo unavailable

<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>

带时间的日期，分别精确到分钟与到秒。

日期与时间可交互

Live demo unavailable

<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>

预设、禁用的周末与 plain 样式类。

预设、禁用的周末与 plain可交互

Live demo unavailable

<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>

DateField

#用法

#示例

用法

示例