Date

The date input type is used for date and datetime selection. It provides a calendar picker interface and supports both date-only and datetime formats.

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'date'
• label (string): Display label for the field

Optional Properties

• placeholder (string): Hint text shown when field is empty
• disabled (boolean): Whether the field is disabled
• clearable (boolean): Whether the field can be cleared (default: true)
• now (boolean): Set current date as default value
• editable (boolean): Allow manual text input (default: true)
• time (boolean): Include time selection (default: false)
• isInfinity (boolean): Show infinity option for date ranges
• layout (string): Layout type (default, horizontal)
• rules (array): Validation rules for the field

Examples

Basic Date Field

{
  name: 'birthDate',
  type: 'date',
  label: 'Birth Date',
  placeholder: 'Select birth date',
  rules: ['required']
}

Birth Date*

Date with Time

{
  name: 'meetingTime',
  type: 'date',
  label: 'Meeting Time',
  placeholder: 'Select meeting date and time',
  time: true,
  rules: ['required']
}

Meeting Time*

Date with Default Value (Today)

{
  name: 'startDate',
  type: 'date',
  label: 'Start Date',
  placeholder: 'Select start date',
  now: true,
  rules: ['required']
}

Start Date*

Validation Rules

Common Date Validation Patterns

// Future date only
{
  type: 'custom',
  function: '(value) => new Date(value) >= new Date()',
  message: 'Date must be in the future'
}

// Past date only
{
  type: 'custom',
  function: '(value) => new Date(value) <= new Date()',
  message: 'Date must be in the past'
}

// Date range validation
{
  type: 'custom',
  function: '(value, formValues) => new Date(value) >= new Date(formValues.startDate)',
  message: 'Date must be after start date'
}

// Age validation (18+ years)
{
  type: 'custom',
  function: '(value) => {
    const birthDate = new Date(value);
    const today = new Date();
    const age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();
    return age > 18 || (age === 18 && monthDiff >= 0);
  }',
  message: 'Must be at least 18 years old'
}

Best Practices

1. Use appropriate placeholders that guide user input format
2. Set reasonable default values with the now property when appropriate
3. Enable time selection for scheduling and appointment forms
4. Implement proper validation for date ranges and business logic
5. Consider timezone handling for international applications
6. Use clear labels that indicate the expected date format
7. Test edge cases like leap years, month boundaries, and invalid dates
8. Provide helpful error messages for validation failures
9. Consider accessibility with proper ARIA labels and keyboard navigation
10. Use consistent date formats across your application