Ao configurar e renderizar formulários com Vxe-Form, o componente VxeDateRangePicker oferece flexibilidade no manuseio de datas em formato de intervalo. Ele suporta três métodos principais para vincular dados: como uma string separada por vírgulas, como um array de datas ou utilizando dois campos independentes.

Três Métodos de Vinculação de Dados

O controle é especificado através de itemRender.name: 'VxeDateRangePicker'.

Formato String (Separado por Vírgula)

Este método é ideal quando você precisa armazenar as datas de início e fim como uma única string, separadas por vírgulas.

data: {
  intervaloDatasString: '2025-05-10,2025-05-15'  // Formato: 'dataInicio,dataFim'
}

items: [
  { 
    field: 'intervaloDatasString',
    title: 'Formato String', 
    span: 24, 
    itemRender: { 
      name: 'VxeDateRangePicker'
    } 
  }
]

Formato Array

Utilize este formato quando seus dados de datas forem naturalmante representados como um array, contendo dois elementos para a data de início e a data de fim.

data: {
  intervaloDatasArray: ['2025-05-02', '2025-05-08']  // Formato: [dataInicio, dataFim]
}

items: [
  { 
    field: 'intervaloDatasArray',
    title: 'Formato Array', 
    span: 24, 
    itemRender: { 
      name: 'VxeDateRangePicker'
    } 
  }
]

Formato com Dois Campos Independentes

Esta abordagem é útil quando as datas de início e fim precisam ser armazenadas em campos de dados separados. Os atributos startField e endField são usados para vincular o seletor de intervalo a esses campos específicos.

data: {
  dataInicio: '2025-05-01',
  dataFim: '2025-06-20'
}

items: [
  { 
    field: '_intervaloDatasCampos', // Campo virtual, não armazena dados diretamente
    title: 'Formato com 2 Campos', 
    span: 24, 
    itemRender: { 
      name: 'VxeDateRangePicker',
      startField: 'dataInicio',   // Campo para a data de início
      endField: 'dataFim'         // Campo para a data de fim
    } 
  }
]

Exemplo Completo

<template>
  <div>
    <vxe-form v-bind="formConfig" >
      <template #actions>
        <vxe-button type="reset">Limpar</vxe-button>
        <vxe-button type="submit" status="primary">Enviar</vxe-button>
      </template>
    </vxe-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const formConfig = reactive({
  titleWidth: 120,
  data: {
    nome: 'Exemplo',
    apelido: 'Teste',
    genero: '',
    intervaloDatasString: '2025-05-10,2025-05-15',
    intervaloDatasArray: ['2025-05-02', '2025-05-08'],
    dataInicio: '2025-05-01',
    dataFim: '2025-06-20',
    endereco: ''
  },
  items: [
    { field: 'nome', title: 'Nome', span: 24, itemRender: { name: 'VxeInput' } },
    { field: 'intervaloDatasString', title: 'Formato String', span: 24, itemRender: { name: 'VxeDateRangePicker' } },
    { field: 'intervaloDatasArray', title: 'Formato Array', span: 24, itemRender: { name: 'VxeDateRangePicker' } },
    { field: '_intervaloDatasCampos', title: 'Formato com 2 Campos', span: 24, itemRender: { name: 'VxeDateRangePicker', startField: 'dataInicio', endField: 'dataFim' } },
    { align: 'center', span: 24, slots: { default: 'actions' } }
  ]
})
</script>

Observações Importentes:

• Formato String: As datas devem ser separadas estritamente por vírgula, no formato 'YYYY-MM-DD,YYYY-MM-DD'.
• Formato Array: O array deve conter exatamante dois elementos, representando a data de início e a data de fim, respectivamente.
• Formato com Campos Independentes: É necessário definir um field virtual (por exemplo, _intervaloDatasCampos) e usar startField e endField para referenciar os campos reais onde as datas serão armazenadas.

O formato padrão das datas é 'yyyy-MM-dd', mas pode ser customizado através das propriedades do componente.