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

Behaviors

This component supports the following behaviors:

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 clear the date input. 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>

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

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

clearToInitialValue

default: false

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>

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

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

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

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

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

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

inline

default: true

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

invalidMessages

The invalid messages to display for the input component.

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:

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>

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

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

validationIconError

Icon to display for error state when concise validation summary is enabled.

validationIconSuccess

Icon to display for valid state when concise validation summary is enabled.

validationStatus

default: "none"

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

Available values:

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

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

verboseValidationFeedback

Enables a concise validation summary (icon) in input components.

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:

Events

didChange

This event is triggered when value of DateInput has changed.

Signature: didChange(newValue: any): void

• newValue: The new value of the component.

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>

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

Signature: gotFocus(): void

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>

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

Signature: lostFocus(): void

Exposed Methods

focus

Focus the DateInput component.

Signature: focus(): void

isoValue

Get the current date value formatted in ISO standard (YYYY-MM-DD) format, suitable for JSON serialization.

Signature: isoValue(): string | null

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>

<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