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/ui/DateRangePicker.vue'

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

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

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

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

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

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/ui/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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          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/ui/DateRangePicker.vue'

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

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

const isWeekend = (date: string): boolean => {
  const dateTime = getDateTime(date)
  const dayOfWeek = dateTime.weekday
  return dayOfWeek === 6 || dayOfWeek === 7
}

const isOddDay = (date: string): boolean => {
  const dateTime = getDateTime(date)
  return dateTime.day % 2 === 1
}
</script>

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

    <nord-stack 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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          id="date-range-picker-odddays"
          v-model="range3"
          v-model:is-open="isOpen3"
          :is-date-disabled="isOddDay"
          :default-preset="DateRangeOption.Last30Days"
        />
      </nord-fieldset>
    </nord-stack>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/ui/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>

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

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

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

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

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/ui/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>

    <nord-stack 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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          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>
    </nord-stack>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/ui/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>

    <nord-stack 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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          id="date-range-picker-no-presets"
          v-model="range4"
          v-model:is-open="isOpen4"
          :presets="[]"
          :default-preset="DateRangeOption.Today"
        />
      </nord-fieldset>
    </nord-stack>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/ui/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>

    <nord-stack 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>
        <UiDateRangePicker
          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>
        <UiDateRangePicker
          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>
    </nord-stack>
  </nord-card>
</template>

<script setup lang="ts">
import type { ModelValue as DateRangePickerModelValue } from '@/components/ui/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>

    <nord-stack gap="xl">
      <div class="n-typescale-s">
        <strong>Selected:</strong>
        {{ 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>
    </nord-stack>

    <UiDateRangePicker
      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?