DateInput

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.

Installation

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

Requires React 19+, base CSS and a Theme provider. See Setup.

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.

Usage guidance

• 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 DateInput inside InputGroup when adding a short static prefix or suffix, such as a due-date hint.
• Avoid: Use a DateInput for free-form text that does not represent a calendar date.
• Avoid: Hide the label without surrounding context that makes the field purpose obvious.
• Avoid: Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.
• Avoid: 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.

Theming API

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

Anatomy

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

Examples

• Date Input: A date input field with a calendar popover. Type a date or click the calendar icon to pick one.
• DateInput — Clearable: Date input with a clear button that resets the value. Use when the date field is optional and the user may need to undo their selection.
• DateInput — Min/Max Constraints: Date input constrained to a min/max window. Use when only certain dates are valid, like booking availability or a fiscal quarter.
• DateInput — Formats: The format prop reuses Timestamp's format vocabulary to control how the committed value is displayed: date, date_long (default), date_weekday, and system_date, or a function for a fully custom string. Formatting applies only to the committed value, never to text the user is actively typing.
• DateInput — Description: Date input with helper text below the label explaining what the field expects. Use when the purpose of the date is not obvious from the label alone.
• DateInput — Validation: Date input in all three status states: error, warning, and success. Use to surface validation issues, caution the user, or confirm a valid selection.