Date range field

The date range field stores a tuple of timestamps in milliseconds that represent two date values.

Examples

Here's an example of using the date range field in a block:

# blocks/Event.vue

<template>
  <div>
    <span>
      {{ eventDate?.[0] ? new Date(eventDate?.[0]).toLocaleDateString() : 'Unknown' }} -
      {{ eventDate?.[1] ? new Date(eventDate?.[1]).toLocaleDateString() : 'Unknown' }}
    </span>
    ...
  </div>
</template>

<script lang="ts" setup>
import { dateRangeField } from '#pruvious'

defineProps({
  eventDate: dateRangeField({
    required: true,
    placeholder: ['From', 'To'],
  }),
})
</script>

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    discountDate: {
      type: 'date-range',
      options: {
        required: true,
        placeholder: ['From', 'To'],
      },
    },
    // ...
  },
})

Options

You can specify the following options in the date range field: