Time range field

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

Examples

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

# blocks/ProductAd.vue

<template>
  <div v-if="showAds">
    ...
  </div>
</template>

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

const props = defineProps({
  dailyAdCampaign: timeRangeField({
    placeholder: ['From', 'To'],
  }),
})

const showAds = computed(() => {
  const now = Date.now()

  return (
    props.dailyAdCampaign?.[0] &&
    props.dailyAdCampaign?.[1] &&
    now >= props.dailyAdCampaign[0] &&
    now <= props.dailyAdCampaign[1]
  )
})
</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: {
    dailyAdCampaign: {
      type: 'time-range',
      options: {
        placeholder: ['From', 'To'],
      },
    },
    // ...
  },
})

Options

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