Version:

Install ​

shell
npm i @mate-vue/custom-field

Import ​

vue
<script setup>
import { MateCustomField } from '@mate-vue/custom-field';
</script>

Variants ​

Text ​

vue
<template>
  <MateCustomField theme="range-selector">
    <MateTextField label="Start"></MateTextField>
    <MateTextField label="End"></MateTextField>
  </MateCustomField>
</template>

Date Picker ​

vue
<template>
  <MateCustomField theme="range-selector">
    <MateDatePicker label="Start"></MateDatePicker>
    <MateDatePicker label="End"></MateDatePicker>
  </MateCustomField>
</template>

Time Picker ​

vue
<template>
  <MateCustomField theme="range-selector">
    <MateTimePicker label="Start"></MateTimePicker>
    <MateTimePicker label="End"></MateTimePicker>
  </MateCustomField>
</template>

Combo Box ​

vue
<template>
  <MateCustomField theme="range-selector">
    <MateComboBox label="Start" :items="items"></MateComboBox>
    <MateComboBox label="End" :items="items"></MateComboBox>
  </MateCustomField>
</template>