DropdownDateForm

MeDropdownDateForm works with the @internationalized/date package.

Usage

<template>
  <MeDropdownDateForm @change="onChange" />
</template>

<script setup>
  function onChange(date) {
    console.log('Selected period: ', date)
  }
</script>

Custom options

Use the customOptions prop to choose which options to display in the dropdown. It must be an array of strings, each containing the id of an option to display.

Please note that all-period is the default option. It emits undefined when selected, meaning that no date filter should be applied. Omitting this option may cause unexpected behavior.

enum DropdownDateFormOptions {
  AllPeriod = 'all-period',
  Today = 'today',
  Yesterday = 'yesterday',
  ThisWeek = 'this-week',
  Last7Days = 'last-7-days',
  Last30Days = 'last-30-days',
  SpecificPeriod = 'specific-period'
}

<template>
  <MeDropdownDateForm
    :custom-options="['all-period', 'today', 'last-7-days']"
  />
</template>

Color, size and variant

Use the color, size, and variant props to customize MeDropdownDateForm.

<template>
  <MeDropdownDateForm
    color="success"
    variant="solid"
    size="lg"
  />
</template>

Custom label

The label slot allows you to customize the trigger button label. It is scoped to the selected item object, or undefined if no option is selected.

type DropdownDateFormItem = {
  label: string
  id: string
}

<template>
  <MeDropdownDateForm>
    <template #label="{ item }">
      Selected: {{ item?.label ?? 'All period' }}
    </template>
  </MeDropdownDateForm>
</template>

Disabled

Use the disabled prop to prevent the component from opening.

<template>
  <MeDropdownDateForm
    disabled
  />
</template>

API

Props

Emits