if there is a good way to create a DateFiled that contains only months and years

[harveylii]

Env

reka-ui 2.4.0

Description

I'm creating a expiration date input which requires only month and year. But I found out the largest granularity prop of DateField component is 'day', so I wrote this:

<DateFieldRoot class="flex items-center" v-model="model">
      <template #default="{ segments }">
        <template
          v-for="(item, index) in props.segments"
          :key="typeof item === 'string' ? index : item.part"
        >
          <span :class="inputClass" v-if="typeof item === 'string'">{{ item }}</span>
          <DateFieldInput v-else :part="item.part" :class="inputClass" placeholder="123">
            {{ segments.find((segment) => segment.part === item.part)?.value }}
          </DateFieldInput>
        </template>
      </template>
    </DateFieldRoot>

props.segments looks like [{ part: 'month' }, '/', { part: 'year' }]

This is so inelegant, so I am wondering if there is a better way to create a DateFiled that contains only months and years