DateInput

DateInput provides a text-based date input interface for selecting single dates or date ranges, with direct keyboard input similar to TimeInput. It offers customizable formatting and validation options without dropdown calendars.

Key features:

Date format support: Multiple date formats including MM/dd/yyyy, yyyy-MM-dd, and dd/MM/yyyy
Direct input: Keyboard-only date entry with input fields for day, month, and year
Input validation: Real-time validation with visual feedback for invalid dates
Range support: Single date selection (default) or date range selection
Accessibility: Full keyboard navigation and screen reader support

Properties

`autoFocus` (default: false)

If this property is set to true, the component gets the focus automatically when displayed.

`clearable` (default: false)

Whether to show a clear button to reset the input

When enabled, it displays a clear button that allows users to reset the date input back to its initial value. Enter a date in this app and then click the clear button:

<App>
  <DateInput initialValue="05/25/2024" />
  <DateInput clearable="true" initialValue="05/25/2024" />
</App>

Example: clearable

<App>
  <DateInput initialValue="05/25/2024" />
  <DateInput clearable="true" initialValue="05/25/2024" />
</App>

`clearIcon`

Icon name for the clear button

<App>
  <DateInput initialValue="05/25/2024" clearable="true" clearIcon="trash" />
</App>

Example: clearIcon

<App>
  <DateInput initialValue="05/25/2024" clearable="true" clearIcon="trash" />
</App>

`clearToInitialValue` (default: true)

Whether clearing resets to initial value or null

When true, the clear button resets the input to its initial value. When false, it clears the input completely.

<App>
  <DateInput clearable="true" clearToInitialValue="true" initialValue="05/25/2024" />
  <DateInput clearable="true" clearToInitialValue="false" initialValue="05/25/2024" />
</App>

Example: clearToInitialValue

<App>
  <DateInput clearable="true" clearToInitialValue="true" initialValue="05/25/2024" />
  <DateInput clearable="true" clearToInitialValue="false" initialValue="05/25/2024" />
</App>

`dateFormat` (default: "MM/dd/yyyy")

The format of the date displayed in the input field

Available values: MM/dd/yyyy (default), MM-dd-yyyy, yyyy/MM/dd, yyyy-MM-dd, dd/MM/yyyy, dd-MM-yyyy, yyyyMMdd, MMddyyyy

The dateFormat prop controls how dates are displayed and entered. Different formats change the order and separators of day, month, and year fields.

Regardless of the dateFormat, the year input field always accepts and displays 4-digit years. When entering a 2-digit year, it will be automatically normalized to a 4-digit year.

Format	Description	Example
`MM/dd/yyyy`	US format with slashes	05/25/2024
`MM-dd-yyyy`	US format with dashes	05-25-2024
`yyyy/MM/dd`	ISO-like format with slashes	2024/05/25
`yyyy-MM-dd`	ISO format with dashes	2024-05-25
`dd/MM/yyyy`	European format with slashes	25/05/2024
`dd-MM-yyyy`	European format with dashes	25-05-2024
`yyyyMMdd`	Compact format without separators	20240525
`MMddyyyy`	US compact format	05252024

<App>
  <DateInput dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
  <DateInput dateFormat="yyyy-MM-dd" initialValue="2024-05-25" />
  <DateInput dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
  <DateInput dateFormat="yyyyMMdd" initialValue="20240525" />
</App>

Example: dateFormat

<App>
  <DateInput dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
  <DateInput dateFormat="yyyy-MM-dd" initialValue="2024-05-25" />
  <DateInput dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
  <DateInput dateFormat="yyyyMMdd" initialValue="20240525" />
</App>

`disabledDates`

An optional array of dates that are disabled (compatibility with DatePicker, not used in DateInput)

`emptyCharacter` (default: "-")

Character used to create placeholder text for empty input fields

Character to use as placeholder for empty date values. If longer than 1 character, uses the first character. Defaults to '-'.

<App>
  <DateInput emptyCharacter="." />
  <DateInput emptyCharacter="*" />
  <DateInput emptyCharacter="abc" />
</App>

Example: emptyCharacter

<App>
  <DateInput emptyCharacter="." />
  <DateInput emptyCharacter="*" />
  <DateInput emptyCharacter="abc" />
</App>

`enabled` (default: true)

This boolean property value indicates whether the component responds to user events (true) or not (false).

<App>
  <DateInput enabled="false" initialValue="05/25/2024" />
</App>

Example: enabled

<App>
  <DateInput enabled="false" initialValue="05/25/2024" />
</App>

`endIcon`

This property sets an optional icon to appear on the end (right side when the left-to-right direction is set) of the input.

`endText`

This property sets an optional text to appear on the end (right side when the left-to-right direction is set) of the input.

`gap`

The gap between input elements

`initialValue`

This property sets the component's initial value.

<App>
  <DateInput initialValue="05/25/2024" />
</App>

Example: initialValue

<App>
  <DateInput initialValue="05/25/2024" />
</App>

`inline` (default: true)

Whether to display the date input inline (compatibility with DatePicker, always true for DateInput)

`label`

This property sets the label of the component. If not set, the component will not display a label.

`labelBreak` (default: true)

This boolean value indicates whether the DateInput label can be split into multiple lines if it would overflow the available label width.

`labelPosition` (default: "top")

Places the label at the given position of the component.

Available values:

Value	Description
`start`	The left side of the input (left-to-right) or the right side of the input (right-to-left)
`end`	The right side of the input (left-to-right) or the left side of the input (right-to-left)
`top`	The top of the input (default)
`bottom`	The bottom of the input

`labelWidth`

This property sets the width of the DateInput component's label. If not defined, the label's width will be determined by its content and the available space.

`maxValue`

The optional end date of the selectable date range. If not defined, the range allows any future dates.

`minValue`

The optional start date of the selectable date range. If not defined, the range allows any dates in the past.

`mode` (default: "single")

The mode of the date input (single or range)

Available values: single (default), range

Available values:

Value	Description
`single`	Single date selection (default)
`range`	Date range selection

`mute` (default: false)

Whether to mute the beep sound while still firing the beep event

When true, prevents audible beeps but still fires the beep event for programmatic handling.

`readOnly` (default: false)

Set this property to true to disallow changing the component value.

Makes the date input read-only. Users can see the value but cannot modify it.

<App>
  <DateInput readOnly="true" initialValue="05/25/2024" />
</App>

Example: readOnly

<App>
  <DateInput readOnly="true" initialValue="05/25/2024" />
</App>

`required` (default: false)

Whether the input is required

Marks the date input as required for form validation.

<App>
  <DateInput required="true" />
</App>

Example: required

<App>
  <DateInput required="true" />
</App>

`showWeekNumber` (default: false)

Whether to show the week number (compatibility with DatePicker, not used in DateInput)

`startIcon`

This property sets an optional icon to appear at the start (left side when the left-to-right direction is set) of the input.

`startText`

This property sets an optional text to appear at the start (left side when the left-to-right direction is set) of the input.

`validationStatus` (default: "none")

This property allows you to set the validation status of the input component.

Available values:

Value	Description
`valid`	Visual indicator for an input that is accepted
`warning`	Visual indicator for an input that produced a warning
`error`	Visual indicator for an input that produced an error

Value	Description
`valid`	Visual indicator for an input that is accepted
`warning`	Visual indicator for an input that produced a warning
`error`	Visual indicator for an input that produced an error

<App>
  <DateInput validationStatus="valid" initialValue="05/25/2024" />
  <DateInput validationStatus="warning" initialValue="05/25/2024" />
  <DateInput validationStatus="error" initialValue="05/25/2024" />
</App>

Example: validationStatus

<App>
  <DateInput validationStatus="valid" initialValue="05/25/2024" />
  <DateInput validationStatus="warning" initialValue="05/25/2024" />
  <DateInput validationStatus="error" initialValue="05/25/2024" />
</App>

`weekStartsOn` (default: 0)

The first day of the week. 0 is Sunday, 1 is Monday, etc. (compatibility with DatePicker, not used in DateInput)

Available values:

Value	Description
`0`	Sunday (default)
`1`	Monday
`2`	Tuesday
`3`	Wednesday
`4`	Thursday
`5`	Friday
`6`	Saturday

Events

`beep`

Event triggered when a beep should occur due to invalid input auto-tab prevention

Fired when the user attempts an action that would cause a beep (like entering invalid values).

<App var.beepMessage="">
  <Text value="{beepMessage}" />
  <DateInput 
    onBeep="beepMessage = 'Beep! Invalid input attempted'"
    onDidChange="beepMessage = ''" />
</App>

Example: beep

<App var.beepMessage="">
  <Text value="{beepMessage}" />
  <DateInput 
    onBeep="beepMessage = 'Beep! Invalid input attempted'"
    onDidChange="beepMessage = ''" />
</App>

`didChange`

This event is triggered when value of DateInput has changed.

Fired when the date value changes. Receives the new date value as a parameter.

The date value changes when the edited input part (day, month, year) loses focus and contains a valid value.

<App var.selectedDate="No date selected">
  <Text value="{selectedDate}" />
  <DateInput 
    dateFormat="yyyy-MM-dd"
    initialValue="2024-05-25" 
    onDidChange="(date) => selectedDate = date" />
</App>

Example: didChange

<App var.selectedDate="No date selected">
  <Text value="{selectedDate}" />
  <DateInput 
    dateFormat="yyyy-MM-dd"
    initialValue="2024-05-25" 
    onDidChange="(date) => selectedDate = date" />
</App>

`gotFocus`

This event is triggered when the DateInput has received the focus.

Fired when the date input receives focus.

<App var.isFocused="{false}">
  <Text value="{isFocused 
    ? 'DateInput focused' : 'DateInput lost focus'}" 
  />
  <DateInput
    dateFormat="MM/dd/yyyy"
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false"
    initialValue="05/25/2024"
  />
</App>

Example: gotFocus/lostFocus

<App var.isFocused="{false}">
  <Text value="{isFocused 
    ? 'DateInput focused' : 'DateInput lost focus'}" 
  />
  <DateInput
    dateFormat="MM/dd/yyyy"
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false"
    initialValue="05/25/2024"
  />
</App>

`lostFocus`

This event is triggered when the DateInput has lost the focus.

Exposed Methods

`focus`

Focus the DateInput component.

Signature: focus(): void

`setValue`

This method sets the current value of the DateInput.

Signature: set value(value: any): void

value: The new value to set for the date input.

<App>
  <HStack>
    <Button
      label="Set Date to 05/25/2024"
      onClick="picker.setValue('05/25/2024')" />
    <Button
      label="Clear Date"
      onClick="picker.setValue('')" />
  </HStack>
  <DateInput id="picker" />
</App>

Example: setValue

<App>
  <HStack>
    <Button
      label="Set Date to 05/25/2024"
      onClick="picker.setValue('05/25/2024')" />
    <Button
      label="Clear Date"
      onClick="picker.setValue('')" />
  </HStack>
  <DateInput id="picker" />
</App>

`value`

You can query the component's value. If no value is set, it will retrieve undefined.

Signature: get value(): any

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

clearButton: The button to clear the date input.
day: The day input field.
month: The month input field.
year: The year input field.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-DateInput--disabled	none	none
backgroundColor-DateInput--hover	none	none
backgroundColor-DateInput-default	none	none
backgroundColor-DateInput-default--focus	none	none
backgroundColor-DateInput-default--hover	none	none
backgroundColor-DateInput-error	none	none
backgroundColor-DateInput-error--focus	none	none
backgroundColor-DateInput-error--hover	none	none
backgroundColor-DateInput-success	none	none
backgroundColor-DateInput-success--focus	none	none
backgroundColor-DateInput-success--hover	none	none
backgroundColor-DateInput-warning	none	none
backgroundColor-DateInput-warning--focus	none	none
backgroundColor-DateInput-warning--hover	none	none
backgroundColor-input-DateInput-invalid	rgba(220, 53, 69, 0.15)	rgba(220, 53, 69, 0.15)
border-DateInput	none	none
borderBottom-DateInput	none	none
borderBottomColor-DateInput	none	none
borderBottomStyle-DateInput	none	none
borderBottomWidth-DateInput	none	none
borderColor-DateInput	none	none
borderColor-DateInput--disabled	none	none
borderColor-DateInput-default	none	none
borderColor-DateInput-default--focus	none	none
borderColor-DateInput-default--hover	none	none
borderColor-DateInput-error	none	none
borderColor-DateInput-error--focus	none	none
borderColor-DateInput-error--hover	none	none
borderColor-DateInput-success	none	none
borderColor-DateInput-success--focus	none	none
borderColor-DateInput-success--hover	none	none
borderColor-DateInput-warning	none	none
borderColor-DateInput-warning--focus	none	none
borderColor-DateInput-warning--hover	none	none
borderEndEndRadius-DateInput	none	none
borderEndStartRadius-DateInput	none	none
borderHorizontal-DateInput	none	none
borderHorizontalColor-DateInput	none	none
borderHorizontalStyle-DateInput	none	none
borderHorizontalWidth-DateInput	none	none
borderLeft-DateInput	none	none
color-DateInput	none	none
borderLeftStyle-DateInput	none	none
borderLeftWidth-DateInput	none	none
borderRadius-button-DateInput	$borderRadius	$borderRadius
borderRadius-DateInput-default	none	none
borderRadius-DateInput-error	none	none
borderRadius-DateInput-success	none	none
borderRadius-DateInput-warning	none	none
borderRadius-input-DateInput	$borderRadius	$borderRadius
borderRight-DateInput	none	none
color-DateInput	none	none
borderRightStyle-DateInput	none	none
borderRightWidth-DateInput	none	none
borderStartEndRadius-DateInput	none	none
borderStartStartRadius-DateInput	none	none
borderStyle-DateInput	none	none
borderStyle-DateInput-default	none	none
borderStyle-DateInput-error	none	none
borderStyle-DateInput-success	none	none
borderStyle-DateInput-warning	none	none
borderTop-DateInput	none	none
borderTopColor-DateInput	none	none
borderTopStyle-DateInput	none	none
borderTopWidth-DateInput	none	none
borderHorizontal-DateInput	none	none
borderVerticalColor-DateInput	none	none
borderVerticalStyle-DateInput	none	none
borderVerticalWidth-DateInput	none	none
borderWidth-DateInput	none	none
borderWidth-DateInput-default	none	none
borderWidth-DateInput-error	none	none
borderWidth-DateInput-success	none	none
borderWidth-DateInput-warning	none	none
boxShadow-DateInput-default	none	none
boxShadow-DateInput-default--focus	none	none
boxShadow-DateInput-default--hover	none	none
boxShadow-DateInput-error	none	none
boxShadow-DateInput-error--focus	none	none
boxShadow-DateInput-error--hover	none	none
boxShadow-DateInput-success	none	none
boxShadow-DateInput-success--focus	none	none
boxShadow-DateInput-success--hover	none	none
boxShadow-DateInput-warning	none	none
boxShadow-DateInput-warning--focus	none	none
boxShadow-DateInput-warning--hover	none	none
color-adornment-DateInput-default	none	none
color-adornment-DateInput-error	none	none
color-adornment-DateInput-success	none	none
color-adornment-DateInput-warning	none	none
color-divider-DateInput	$textColor-secondary	$textColor-secondary
disabledColor-button-DateInput	$textColor-disabled	$textColor-disabled
fontSize-ampm-DateInput	inherit	inherit
fontSize-input-DateInput	inherit	inherit
gap-adornment-DateInput	none	none
hoverColor-button-DateInput	$color-surface-800	$color-surface-800
margin-input-DateInput	none	none
minWidth-ampm-DateInput	2em	2em
minWidth-input-DateInput	0.54em	0.54em
opacity-DateInput--disabled	none	none
outlineColor-button-DateInput--focused	$color-accent-500	$color-accent-500
outlineColor-DateInput-default--focus	none	none
outlineColor-DateInput-error--focus	none	none
outlineColor-DateInput-success--focus	none	none
outlineColor-DateInput-warning--focus	none	none
outlineOffset-button-DateInput--focused	2px	2px
outlineOffset-DateInput-default--focus	none	none
outlineOffset-DateInput-error--focus	none	none
outlineOffset-DateInput-success--focus	none	none
outlineOffset-DateInput-warning--focus	none	none
outlineStyle-DateInput-default--focus	none	none
outlineStyle-DateInput-error--focus	none	none
outlineStyle-DateInput-success--focus	none	none
outlineStyle-DateInput-warning--focus	none	none
outlineWidth-button-DateInput--focused	2px	2px
outlineWidth-DateInput-default--focus	none	none
outlineWidth-DateInput-error--focus	none	none
outlineWidth-DateInput-success--focus	none	none
outlineWidth-DateInput-warning--focus	none	none
padding-button-DateInput	4px 6px	4px 6px
padding-DateInput	none	none
padding-DateInput-default	none	none
padding-DateInput-error	none	none
padding-DateInput-success	none	none
padding-DateInput-warning	none	none
padding-input-DateInput	0 2px	0 2px
paddingBottom-DateInput	none	none
paddingHorizontal-DateInput	none	none
paddingLeft-DateInput	none	none
paddingRight-DateInput	none	none
paddingTop-DateInput	none	none
paddingVertical-DateInput	none	none
spacing-divider-DateInput	1px 0	1px 0
textAlign-input-DateInput	center	center
textColor-DateInput--disabled	none	none
textColor-DateInput-default	none	none
textColor-DateInput-default--focus	none	none
textColor-DateInput-default--hover	none	none
textColor-DateInput-error	none	none
textColor-DateInput-error--focus	none	none
textColor-DateInput-error--hover	none	none
textColor-DateInput-success	none	none
textColor-DateInput-success--focus	none	none
textColor-DateInput-success--hover	none	none
textColor-DateInput-warning	none	none
textColor-DateInput-warning--focus	none	none
textColor-DateInput-warning--hover	none	none
transition-background-DateInput	none	none
width-input-DateInput	1.8em	1.8em

DateInput

Properties

autoFocus (default: false)

clearable (default: false)

clearIcon

clearToInitialValue (default: true)

dateFormat (default: "MM/dd/yyyy")

disabledDates

emptyCharacter (default: "-")

enabled (default: true)

endIcon

endText

gap

initialValue

inline (default: true)

label

labelBreak (default: true)

labelPosition (default: "top")

labelWidth

maxValue

minValue

mode (default: "single")

mute (default: false)

readOnly (default: false)

required (default: false)

showWeekNumber (default: false)

startIcon

startText

validationStatus (default: "none")

weekStartsOn (default: 0)

Events

beep

didChange

gotFocus

lostFocus

Exposed Methods

focus

setValue

value

Parts

Styling

Theme Variables

`autoFocus` (default: false)

`clearable` (default: false)

`clearIcon`

`clearToInitialValue` (default: true)

`dateFormat` (default: "MM/dd/yyyy")

`disabledDates`

`emptyCharacter` (default: "-")

`enabled` (default: true)

`endIcon`

`endText`

`gap`

`initialValue`

`inline` (default: true)

`label`

`labelBreak` (default: true)

`labelPosition` (default: "top")

`labelWidth`

`maxValue`

`minValue`

`mode` (default: "single")

`mute` (default: false)

`readOnly` (default: false)

`required` (default: false)

`showWeekNumber` (default: false)

`startIcon`

`startText`

`validationStatus` (default: "none")

`weekStartsOn` (default: 0)

`beep`

`didChange`

`gotFocus`

`lostFocus`

`focus`

`setValue`

`value`