Date Field

​

Examples

• Basic Usage
• With Validation
• States

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

Simple Date Field

With Label

With Description

Copy

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

Date field with comprehensive validation and error handling.

With NeoDateValidator

Custom Validation Logic

Copy

final dateString = useState("");
final errorMessage = useState<String?>(null);

NeoDateField(
  dateString: dateString.value,
  label: "Birth Date",
  errorText: errorMessage.value,
  onSubmitted: (value) {
    dateString.value = value;
    try {
      // Validate the date string
      final date = NeoDateValidator.validate(value);
      
      // Check if the date is not in the future
      NeoDateValidator.validateIsNotFuture(date);
      
      // Date is valid
      errorMessage.value = null;
      print("Valid birth date: ${NeoDateValidator.format(date)}");
      
    } on FormatException catch (e) {
      errorMessage.value = e.message;
    } on ArgumentError catch (e) {
      errorMessage.value = e.message;
    }
  },
),

Date field in different states.

Error State

Disabled State

Copy

NeoDateField(
  dateString: dateString.value, // Using hooks
  label: "Date",
  errorText: "This field is required",
  onSubmitted: (value) {
    dateString.value = value;
  },
),

​

Properties

​

Required

​

Content

​

State

​

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

​

Navigation

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