Skip to main content

​
Examples

  • Basic Usage
  • With Validation
  • States
Basic date field example

Basic date field with segmented DD-MM-YYYY format and intelligent navigation.

NeoDateField(
  dateString: dateString.value, // Using hooks
  onSubmitted: (value) {
    dateString.value = value;
  },
),

​
Properties

​
Required

​
dateString
String?
required
The current date string value in DD-MM-YYYY format. Can be partial during input but should be complete for display. Use null or empty string to clear the field.
​
onSubmitted
ValueChanged<String>
required
Callback triggered when user completes editing (all segments filled or focus loss). Receives the normalized date string in DD-MM-YYYY format.

​
Content

​
label
String?
Optional label text displayed above the date field.
​
description
String?
Optional helper text displayed below the field. Hidden when errorText is present.

​
State

​
errorText
String?
Error message displayed below the field. When present, shows error state with danger-colored border and replaces the description text.
​
isEnabled
bool
default:"true"
Controls whether the field accepts input and focus. When disabled, the field appears dimmed and prevents all interaction.

​
Input Behavior

​
Value Clamping

  • Typing: Days clamped to 1-31, months to 1-12, years to 1-9999 regardless of context
  • Arrow keys: Context-aware clamping (e.g., day respects actual month/year if entered)
  • Why different?: Safety in high-stake applications - typing “31-02” shows the invalid state instead of silently auto-correcting

​
Auto-Advance

  • Day: Advances when typing ≥ 4 (e.g., “4” becomes “04” and advances)
  • Month: Advances when typing ≥ 2 (e.g., “2” becomes “02” and advances)
  • Year: Submits when 4 digits entered
  • Arrow keys: Move between segments or increment/decrement values
  • Tab: Standard focus navigation
  • Click: Jump to any segment and select all content

​
Best Practices

  • Validation: Use NeoDateValidator in onSubmitted for comprehensive validation
  • Width constraints: Wrap in SizedBox, Expanded, or ConstrainedBox to prevent layout issues
  • Error handling: Clear errorText and update dateString in onSubmitted for smooth UX

​
Integration Notes

  • Submission-based: Calls onSubmitted when complete (all segments filled, Enter pressed, or focus lost)
⌘I