日期输入 · DateInput

通过文本输入和日历完成单个日期选择。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

• 日期输入 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。
• 日期输入 · 交互示例 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 日期输入 · 交互示例 3：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 日期输入 · 交互示例 4：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 日期输入 · 交互示例 5：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 日期输入 · 输入校验 6：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

Date Input

DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific calendar date.

使用建议

• Base props such as ref, id, data-, aria-, and DOM event handlers go to the date input, the element that is focused and announced. A DOM handler runs after DateInput's own handler for the same event and still receives events it handled (including ones it called preventDefault on), so it cannot cancel built-in behavior.
• Provide clear labels and descriptions so users understand what date is expected.
• Use min, max, and dateConstraints to restrict selectable dates to valid ranges.
• Use hasClear when the date is optional so the user can reset it.
• Show a loading state with changeAction when the date triggers a server-side save.
• 避免：Use a DateInput for free-form text that does not represent a calendar date.
• 避免：Hide the label without surrounding context that makes the field purpose obvious.
• 避免：Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.
• 避免：Wrap a disabled DateInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.

主题 API

{
  "targets": [
    {
      "className": "astryx-date-input",
      "visualProps": [
        "size",
        "status"
      ],
      "states": [
        "disabled"
      ]
    },
    {
      "className": "astryx-date-input-toggle-icon",
      "states": [
        "state"
      ]
    }
  ]
}

组件结构

• Label: Text above the input describing what date is expected.
• Text input: A field where the user can type a date directly. Parses common formats like MM/DD/YYYY.
• Calendar icon: A button that opens the calendar popover for visual date picking.
• Calendar popover: A month grid that appears when the icon is clicked or the input is focused.
• Clear button: A × button that resets the date value. Shown when hasClear is true and a date is set.
• Status message: An error, warning, or success message below the input.