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.

<template>
    <VsInputDate v-model="dateValue" />
</template>

<script setup>
import { ref } from 'vue'
import { VsInputDate } from '@opengis/form'

const dateValue = ref('');
</script>

const schema = [
  // mode = date, datetime, month, time
  {type:'date', name: 'created_ar', mode: 'datetime' } 
]

Mode

Mode - week, datetime, time, month, date - default

  {
    name: 'birthDate',
    type: 'Date',
    mode:'datetime',  // month, year, week
    label: 'Birth Date'
  }

<VsInputDate v-model="dateValue" mode='month'/>

DateTime

Time

Month

Week

Disabled

  {
    name: 'birthDate',
    type: 'Date',
    label: 'Birth Date',
    disabled: true
  }

<VsInputDate v-model="dateValue" disabled />

disabled date

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 ('datetime' | 'month' | 'week' | 'time' | 'date'): Field type (default: 'date')
• isInfinity (boolean): Show infinity option for date ranges
• layout (string): Layout type (default, horizontal)
• rules (array): Validation rules for the field

interface

interface DateProps {
  modelValue?: string | null;
  disabled?: boolean;
  clearable?: boolean;
  now?: boolean;
  placeholder?: string;
  editable?: boolean;
  mode?: 'datetime' | 'month' | 'week' | 'time' | 'date';
  isInfinity?: boolean;
  style?: object;
}

interface DateSchemaItem {
  name: string;
  type: 'date';
  label: string;
  placeholder?: string;
  disabled?: boolean;
  clearable?: boolean;
  now?: boolean;
  editable?: boolean;
  time?: boolean;
  isInfinity?: boolean;
  rules?: (string | object)[];
  conditions?: Conditions | Conditions[];
}

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