Date Picker

一个用于打开日历的输入框。

示例可交互

Date Picker — Avalonia UIKit

Live demo unavailable

<Panel MinHeight="360">
  <CalendarDatePicker Width="220" SelectedDate="2025-03-14" DisplayDate="2025-03-14"
                      SelectedDateFormat="Custom" CustomDateFormatString="yyyy/MM/dd" PlaceholderText="Select date"
                      HorizontalAlignment="Left" VerticalAlignment="Top" />
</Panel>

用法

主题覆盖 CalendarDatePicker：一个输入框样式的字段，显示日期或弱化的 PlaceholderText，末尾有一个弱化的日历图标；当字段获得焦点或其日历打开时，边框转为焦点环，并显示焦点光带。日历在下方 6px 处、以浮层表面打开（即不带卡片的 Calendar 主题），在 150ms 内下滑 8px 并淡入。今天始终会被标记。

文本格式与占位符由应用设置，格式同时决定解析方式。演示设置了 SelectedDateFormat="Custom"、CustomDateFormatString="yyyy/MM/dd" 与 PlaceholderText="Select date"。尺寸：xsmall、small、large（默认为 medium）；尺寸类同时作用于弹出日历（small 打开小尺寸日历，large 打开大尺寸日历）。禁用时字段淡至一半并去掉图标。右键单击文本会打开 Input 的菜单（剪切、复制、粘贴、全选）。

如果需要日期范围、预设、清除按钮或具体时间，请使用 uikit:DateField。

示例

四种尺寸。

尺寸可交互

Live demo unavailable

<Panel MinHeight="400">
  <WrapPanel ItemSpacing="12" LineSpacing="12" VerticalAlignment="Top">
    <CalendarDatePicker Classes="xsmall" Width="200" SelectedDate="2025-03-14" DisplayDate="2025-03-14"
                        SelectedDateFormat="Custom" CustomDateFormatString="yyyy/MM/dd" />
    <CalendarDatePicker Classes="small" Width="200" SelectedDate="2025-03-14" DisplayDate="2025-03-14"
                        SelectedDateFormat="Custom" CustomDateFormatString="yyyy/MM/dd" />
    <CalendarDatePicker Width="200" SelectedDate="2025-03-14" DisplayDate="2025-03-14"
                        SelectedDateFormat="Custom" CustomDateFormatString="yyyy/MM/dd" />
    <CalendarDatePicker Classes="large" Width="200" SelectedDate="2025-03-14" DisplayDate="2025-03-14"
                        SelectedDateFormat="Custom" CustomDateFormatString="yyyy/MM/dd" />
  </WrapPanel>
</Panel>

一个带占位符的空字段、一个带日期的禁用字段，以及一个禁用的空字段。

状态可交互

Live demo unavailable

<Panel MinHeight="360">
  <WrapPanel ItemSpacing="12" LineSpacing="12" VerticalAlignment="Top">
    <CalendarDatePicker Width="200" PlaceholderText="Select date"
                        SelectedDateFormat="Custom" CustomDateFormatString="yyyy/MM/dd" />
    <CalendarDatePicker Width="200" SelectedDate="2025-03-14" IsEnabled="False"
                        SelectedDateFormat="Custom" CustomDateFormatString="yyyy/MM/dd" />
    <CalendarDatePicker Width="200" PlaceholderText="Select date" IsEnabled="False"
                        SelectedDateFormat="Custom" CustomDateFormatString="yyyy/MM/dd" />
  </WrapPanel>
</Panel>

Date Picker

#用法

#示例

用法

示例