Date Range PickerCommunity Asset

Product: Provet Cloud
Availability: New Frontend

Open in new window

View RTL

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/base/DateRangePicker.vue'

const selectedRange = ref<DateRangePickerModelValue>(null)
const isOpen = ref(false)
</script>

<template>
  <nord-card padding="l">
    <h2 slot="header">Basic DateRangePicker</h2>

    <div class="n-stack">
      <div v-if="selectedRange" class="n-typescale-s">
        <span class="n-font-weight-active">Selected:</span>
        {{ selectedRange?.[0] || 'N/A' }} - {{ selectedRange?.[1] || 'N/A' }}
      </div>

      <div>
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-basic"
          @click="isOpen = true"
        >
          Open Date Range Picker
        </nord-button>

        <BaseDateRangePicker
          id="date-range-picker-basic"
          v-model="selectedRange"
          v-model:is-open="isOpen"
        />
      </div>
    </div>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/base/DateRangePicker.vue'

const range1 = ref<DateRangePickerModelValue>(null)
const range2 = ref<DateRangePickerModelValue>(null)
const range3 = ref<DateRangePickerModelValue>(null)
const range4 = ref<DateRangePickerModelValue>(null)

const isOpen1 = ref(false)
const isOpen2 = ref(false)
const isOpen3 = ref(false)
const isOpen4 = ref(false)
</script>

<template>
  <nord-card padding="l">
    <h2 slot="header">Default Preset</h2>

    <div class="n-grid-2 n-gap-l">
      <nord-fieldset label="Default Preset: Today">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-today"
          @click="isOpen1 = true"
        >
          Open
        </nord-button>
        <div v-if="range1" class="n-typescale-s n-margin-bs-s">
          {{ range1[0] }} - {{ range1[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-today"
          v-model="range1"
          v-model:is-open="isOpen1"
          :default-preset="DateRangeOption.Today"
        />
      </nord-fieldset>

      <nord-fieldset label="Default Preset: Last 7 Days">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-last7days"
          @click="isOpen2 = true"
        >
          Open
        </nord-button>
        <div v-if="range2" class="n-typescale-s n-margin-bs-s">
          {{ range2[0] }} - {{ range2[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-last7days"
          v-model="range2"
          v-model:is-open="isOpen2"
          :default-preset="DateRangeOption.Last7Days"
        />
      </nord-fieldset>

      <nord-fieldset label="Default Preset: Last 30 Days">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-last30days"
          @click="isOpen3 = true"
        >
          Open
        </nord-button>
        <div v-if="range3" class="n-typescale-s n-margin-bs-s">
          {{ range3[0] }} - {{ range3[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-last30days"
          v-model="range3"
          v-model:is-open="isOpen3"
          :default-preset="DateRangeOption.Last30Days"
        />
      </nord-fieldset>

      <nord-fieldset label="Default Preset: Current Month">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-currentmonth"
          @click="isOpen4 = true"
        >
          Open
        </nord-button>
        <div v-if="range4" class="n-typescale-s n-margin-bs-s">
          {{ range4[0] }} - {{ range4[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-currentmonth"
          v-model="range4"
          v-model:is-open="isOpen4"
          :default-preset="DateRangeOption.CurrentMonth"
        />
      </nord-fieldset>
    </div>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/base/DateRangePicker.vue'

const range1 = ref<DateRangePickerModelValue>(null)
const range3 = ref<DateRangePickerModelValue>(null)

const isOpen1 = ref(false)
const isOpen3 = ref(false)
</script>

<template>
  <nord-card padding="l">
    <h2 slot="header">Disabled Dates</h2>

    <div class="n-stack n-gap-l">
      <nord-fieldset label="Disable Weekends">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-weekends"
          @click="isOpen1 = true"
        >
          Open
        </nord-button>
        <div v-if="range1" class="n-typescale-s n-margin-bs-s">
          {{ range1[0] }} - {{ range1[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-weekends"
          v-model="range1"
          v-model:is-open="isOpen1"
          :is-date-disabled="isWeekend"
          :default-preset="DateRangeOption.Last7Days"
        />
      </nord-fieldset>

      <nord-fieldset label="Disable Odd Days">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-odddays"
          @click="isOpen3 = true"
        >
          Open
        </nord-button>
        <div v-if="range3" class="n-typescale-s n-margin-bs-s">
          {{ range3[0] }} - {{ range3[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-odddays"
          v-model="range3"
          v-model:is-open="isOpen3"
          :is-date-disabled="isOddDay"
          :default-preset="DateRangeOption.Last30Days"
        />
      </nord-fieldset>
    </div>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/base/DateRangePicker.vue'

const range1 = ref<DateRangePickerModelValue>(null)
const range2 = ref<DateRangePickerModelValue>(['2024-01-01', '2024-12-31'])
const range3 = ref<DateRangePickerModelValue>(null)
const range4 = ref<DateRangePickerModelValue>(null)

const displayRange3 = ref(true)
</script>

<template>
  <nord-card padding="l">
    <h2 slot="header">Filter Date Range Picker</h2>

    <div class="n-stack n-gap-l">
      <nord-fieldset label="Default (clearable)">
        <UiFilterDateRangePicker
          v-model="range1"
          label="Date of Birth"
          name="dateOfBirth"
        />
      </nord-fieldset>

      <nord-fieldset label="With pre-selected value">
        <UiFilterDateRangePicker
          v-model="range2"
          label="Created Date"
          name="createdDate"
        />
      </nord-fieldset>

      <nord-fieldset v-if="displayRange3" label="Removable">
        <UiFilterDateRangePicker
          v-model="range3"
          label="Last Modified"
          name="lastModified"
          removable
          @remove="displayRange3 = false"
        />
      </nord-fieldset>

      <nord-fieldset label="Non-clearable">
        <UiFilterDateRangePicker
          v-model="range4"
          label="Registration Date"
          name="registrationDate"
          :clearable="false"
        />
      </nord-fieldset>
    </div>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/base/DateRangePicker.vue'

const range1 = ref<DateRangePickerModelValue>(null)
const range2 = ref<DateRangePickerModelValue>(null)
const range3 = ref<DateRangePickerModelValue>(null)

const isOpen1 = ref(false)
const isOpen2 = ref(false)
const isOpen3 = ref(false)

const todayDate = getTodayDateTimeISO()

const currentMonthStart = getTodayDateTime().startOf('month').toISODate()
const currentMonthEnd = getTodayDateTime().endOf('month').toISODate()
</script>

<template>
  <nord-card padding="l">
    <h2 slot="header">Min/Max Dates</h2>

    <div class="n-stack n-gap-l">
      <nord-fieldset label="Min Date: Current Year Only">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-mindate"
          :aria-expanded="isOpen1"
          @click="isOpen1 = true"
        >
          Open
        </nord-button>
        <div v-if="range1" class="n-typescale-s n-margin-bs-s">
          {{ range1[0] }} - {{ range1[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-mindate"
          v-model="range1"
          v-model:is-open="isOpen1"
          :min-date="todayDate"
          :default-preset="DateRangeOption.Last30Days"
        />
      </nord-fieldset>

      <nord-fieldset label="Max Date: Today">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-maxdate"
          :aria-expanded="isOpen2"
          @click="isOpen2 = true"
        >
          Open
        </nord-button>
        <div v-if="range2" class="n-typescale-s n-margin-bs-s">
          {{ range2[0] }} - {{ range2[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-maxdate"
          v-model="range2"
          v-model:is-open="isOpen2"
          :max-date="todayDate"
          :default-preset="DateRangeOption.Last7Days"
        />
      </nord-fieldset>

      <nord-fieldset label="Both Min and Max Dates: Current Month Only">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-both"
          :aria-expanded="isOpen3"
          @click="isOpen3 = true"
        >
          Open
        </nord-button>
        <div v-if="range3" class="n-typescale-s n-margin-bs-s">
          {{ range3[0] }} - {{ range3[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-both"
          v-model="range3"
          v-model:is-open="isOpen3"
          :min-date="currentMonthStart"
          :max-date="currentMonthEnd"
          :default-preset="DateRangeOption.Today"
        />
      </nord-fieldset>
    </div>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/base/DateRangePicker.vue'

const range1 = ref<DateRangePickerModelValue>(null)
const range2 = ref<DateRangePickerModelValue>(null)
const range3 = ref<DateRangePickerModelValue>(null)
const range4 = ref<DateRangePickerModelValue>(null)

const isOpen1 = ref(false)
const isOpen2 = ref(false)
const isOpen3 = ref(false)
const isOpen4 = ref(false)

const basicPresets = [
  DateRangeOption.Today,
  DateRangeOption.Last7Days,
  DateRangeOption.Last30Days,
]

const quarterlyPresets = [
  DateRangeOption.CurrentQuarter,
  DateRangeOption.LastQuarter,
  DateRangeOption.Q1CurrentYear,
  DateRangeOption.Q2CurrentYear,
  DateRangeOption.Q3CurrentYear,
  DateRangeOption.Q4CurrentYear,
  DateRangeOption.Q4LastYear,
  DateRangeOption.Q3LastYear,
  DateRangeOption.Q2LastYear,
  DateRangeOption.Q1LastYear,
]

const monthlyPresets = [
  DateRangeOption.CurrentMonth,
  DateRangeOption.LastMonth,
  DateRangeOption.Last30Days,
  DateRangeOption.Last60Days,
  DateRangeOption.Last90Days,
]
</script>

<template>
  <nord-card padding="l">
    <h2 slot="header">Custom Presets</h2>

    <div class="n-stack n-gap-l">
      <nord-fieldset label="Basic Presets">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-basic-presets"
          :aria-expanded="isOpen1"
          @click="isOpen1 = true"
        >
          Open
        </nord-button>
        <div v-if="range1" class="n-typescale-s n-margin-bs-s">
          {{ range1[0] }} - {{ range1[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-basic-presets"
          v-model="range1"
          v-model:is-open="isOpen1"
          :presets="basicPresets"
          :default-preset="DateRangeOption.Last7Days"
        />
      </nord-fieldset>

      <nord-fieldset label="Quarterly Presets">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-quarterly-presets"
          :aria-expanded="isOpen2"
          @click="isOpen2 = true"
        >
          Open
        </nord-button>
        <div v-if="range2" class="n-typescale-s n-margin-bs-s">
          {{ range2[0] }} - {{ range2[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-quarterly-presets"
          v-model="range2"
          v-model:is-open="isOpen2"
          :presets="quarterlyPresets"
          :default-preset="DateRangeOption.CurrentQuarter"
        />
      </nord-fieldset>

      <nord-fieldset label="Monthly Presets">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-monthly-presets"
          :aria-expanded="isOpen3"
          @click="isOpen3 = true"
        >
          Open
        </nord-button>
        <div v-if="range3" class="n-typescale-s n-margin-bs-s">
          {{ range3[0] }} - {{ range3[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-monthly-presets"
          v-model="range3"
          v-model:is-open="isOpen3"
          :presets="monthlyPresets"
          :default-preset="DateRangeOption.CurrentMonth"
        />
      </nord-fieldset>

      <nord-fieldset label="No Presets">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-no-presets"
          :aria-expanded="isOpen4"
          @click="isOpen4 = true"
        >
          Open
        </nord-button>
        <div v-if="range4" class="n-typescale-s n-margin-bs-s">
          {{ range4[0] }} - {{ range4[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-no-presets"
          v-model="range4"
          v-model:is-open="isOpen4"
          :presets="[]"
          :default-preset="DateRangeOption.Today"
        />
      </nord-fieldset>
    </div>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/base/DateRangePicker.vue'

const range1 = ref<DateRangePickerModelValue>(null)
const range2 = ref<DateRangePickerModelValue>(null)

const isOpen1 = ref(false)
const isOpen2 = ref(false)

const year2024Start = '2024-01-01'
const year2024End = '2024-12-31'

const sixMonthsAgo = formatDate(
  subtractToDate(getTodayDateTimeISO(), { months: 6 }),
  'yyyy-MM-dd',
)
const today = getTodayDateTimeISO()
</script>

<template>
  <nord-card padding="l">
    <h2 slot="header">Presets with Min/Max</h2>

    <nord-banner variant="info" class="n-margin-be-l">
      Presets outside the min/max date range are automatically filtered out.
    </nord-banner>

    <div class="n-stack n-gap-l">
      <nord-fieldset label="Year 2024 only">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-year2024"
          :aria-expanded="isOpen1"
          @click="isOpen1 = true"
        >
          Open
        </nord-button>
        <div v-if="range1" class="n-typescale-s n-margin-bs-s">
          {{ range1[0] }} - {{ range1[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-year2024"
          v-model="range1"
          v-model:is-open="isOpen1"
          :min-date="year2024Start"
          :max-date="year2024End"
          :default-preset="DateRangeOption.Q1CurrentYear"
        />
      </nord-fieldset>

      <nord-fieldset label="Recent 6 months">
        <nord-button
          aria-haspopup="true"
          aria-controls="date-range-picker-6months"
          :aria-expanded="isOpen2"
          @click="isOpen2 = true"
        >
          Open
        </nord-button>
        <div v-if="range2" class="n-typescale-s n-margin-bs-s">
          {{ range2[0] }} - {{ range2[1] }}
        </div>
        <BaseDateRangePicker
          id="date-range-picker-6months"
          v-model="range2"
          v-model:is-open="isOpen2"
          :min-date="sixMonthsAgo"
          :max-date="today"
          :default-preset="DateRangeOption.Last30Days"
        />
      </nord-fieldset>
    </div>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/base/DateRangePicker.vue'

const { getPredefinedDateRange } = useDateRange()
const selectedRange = ref<DateRangePickerModelValue>(null)
const isOpen = ref(false)

const handleOpen = () => {
  isOpen.value = true
}

const handleClose = () => {
  isOpen.value = false
}

const handleClearSelection = () => {
  selectedRange.value = null
  isOpen.value = false
}

const handleSelectToday = () => {
  const { startDate, endDate } = getPredefinedDateRange(DateRangeOption.Today)
  selectedRange.value = [startDate, endDate]

  // Close datepicker
  isOpen.value = false
}

const handleSelectLast7Days = () => {
  const { startDate, endDate } = getPredefinedDateRange(
    DateRangeOption.Last7Days,
  )
  selectedRange.value = [startDate, endDate]

  // Close datepicker
  isOpen.value = false
}

const handleSetRandomCustomRange = () => {
  const today = getTodayDateTimeISODate()
  const randomDaysAgo = Math.floor(Math.random() * 90) + 1
  const startDate = formatToDateTimeISODate(
    subtractToDate(today, { days: randomDaysAgo }),
  )
  const randomDaysFromStart = Math.floor(Math.random() * randomDaysAgo)
  const endDate = formatToDateTimeISODate(
    subtractToDate(today, { days: randomDaysFromStart }),
  )
  selectedRange.value = [startDate!, endDate!]
  isOpen.value = false
}
</script>

<template>
  <nord-card padding="l">
    <h2 slot="header">Programmatic Control</h2>

    <div class="n-stack n-gap-xl">
      <div class="n-typescale-s">
        <span class="n-font-weight-active">Selected:</span>
        {{ selectedRange?.[0] || 'N/A' }} - {{ selectedRange?.[1] || 'N/A' }}
      </div>

      <nord-fieldset label="Open/Close Control">
        <nord-button-group>
          <nord-button @click="handleOpen">Open</nord-button>
          <nord-button @click="handleClose">Close</nord-button>
        </nord-button-group>
      </nord-fieldset>

      <nord-fieldset label="Preset Selection">
        <nord-button-group>
          <nord-button @click="handleSelectToday">Select Today</nord-button>
          <nord-button @click="handleSelectLast7Days">
            Select Last 7 Days
          </nord-button>
        </nord-button-group>
      </nord-fieldset>

      <nord-fieldset label="Direct Value Control">
        <nord-button-group>
          <nord-button @click="handleSetRandomCustomRange">
            Set Random Range
          </nord-button>
          <nord-button @click="handleClearSelection">Clear</nord-button>
        </nord-button-group>
      </nord-fieldset>
    </div>

    <BaseDateRangePicker
      id="date-range-picker-programmatic"
      v-model="selectedRange"
      v-model:is-open="isOpen"
      class="n-margin-bs-m"
    />
  </nord-card>
</template>

Integration

This community asset is currently only available to use in the New Frontend for Provet Cloud.

Troubleshooting

If you experience any issues while using this community asset, please ask for support in the #vet-frontend Slack channel.

Edit page

Date Range PickerCommunity Asset

Integration

Troubleshooting

Was this page helpful?