diff --git a/demo/sections/components/DateRangeSelect.vue b/demo/sections/components/DateRangeSelect.vue
new file mode 100644
index 000000000..306abd620
--- /dev/null
+++ b/demo/sections/components/DateRangeSelect.vue
@@ -0,0 +1,44 @@
+<template>
+  <ComponentPage title="Date Range Select" :demos="[{ title: 'Date Range Select' }]">
+    <template #description>
+      <DemoState v-model:state="exampleState" v-model:disabled="disabled" />
+    </template>
+
+    <template #date-range-select>
+      <p-content>
+        <p-date-range-select v-model="value" v-bind="{ min, max, clearable, disabled }" />
+        <p-code inline>
+          value: {{ JSON.stringify(value) }}
+        </p-code>
+        <div class="flex justify-start gap-4">
+          <p-checkbox v-model="clearable" :disabled="disabled" label="Clearable" />
+        </div>
+        <div class="flex gap-4 w-1/2">
+          <p-label label="Min Value" :message="min ? format(min, 'MMM do, yyyy h:mm a') : ''">
+            <p-native-date-input v-model="min" :disabled="disabled" :state="exampleState" />
+          </p-label>
+
+          <p-label label="Max Value" :message="max ? format(max, 'MMM do, yyyy h:mm a') : ''">
+            <p-native-date-input v-model="max" :disabled="disabled" :state="exampleState" />
+          </p-label>
+        </div>
+      </p-content>
+    </template>
+  </ComponentPage>
+</template>
+
+<script lang="ts" setup>
+  import { State } from '@/types'
+  import { format } from 'date-fns'
+  import { ref } from 'vue'
+  import ComponentPage from '@/demo/components/ComponentPage.vue'
+  import DemoState from '@/demo/components/DemoState.vue'
+
+  const exampleState = ref<State>()
+  const disabled = ref(false)
+
+  const value = ref()
+  const min = ref<Date>()
+  const max = ref<Date>()
+  const clearable = ref(true)
+</script>
\ No newline at end of file
diff --git a/demo/sections/components/index.ts b/demo/sections/components/index.ts
index 5c8413e2f..15ae89e13 100644
--- a/demo/sections/components/index.ts
+++ b/demo/sections/components/index.ts
@@ -17,6 +17,7 @@ export const components: Section = {
   contextSidebar: () => import('./ContextSidebar.vue'),
   dateInput: () => import('./DateInput.vue'),
   dateRangeInput: () => import('./DateRangeInput.vue'),
+  dateRangeSelect: () => import('./DateRangeSelect.vue'),
   dialog: () => import('./Dialog.vue'),
   divider: () => import('./Divider.vue'),
   drawer: () => import('./Drawer.vue'),
diff --git a/src/components/DateInput/PDateInput.vue b/src/components/DateInput/PDateInput.vue
index 29970500e..d49e187e4 100644
--- a/src/components/DateInput/PDateInput.vue
+++ b/src/components/DateInput/PDateInput.vue
@@ -21,7 +21,6 @@
       <PDatePicker
         v-model="internalModelValue"
         v-model:viewing-date="internalViewingDate"
-        class="p-date-input__date-picker"
         v-bind="{ min, max, showTime }"
         @close="close"
       >
@@ -88,13 +87,6 @@
 </script>
 
 <style>
-.p-date-input__date-picker { @apply
-  bg-floating
-  my-1
-  rounded-default
-  shadow-lg
-}
-
 .p-date-input--open { @apply
   ring-spacing-focus-ring
   ring-focus-ring
diff --git a/src/components/DatePicker/PDatePicker.vue b/src/components/DatePicker/PDatePicker.vue
index 1c6dc4f29..82310a0a8 100644
--- a/src/components/DatePicker/PDatePicker.vue
+++ b/src/components/DatePicker/PDatePicker.vue
@@ -74,6 +74,10 @@
 
 <style>
 .p-date-picker { @apply
+  bg-floating
+  my-1
+  rounded-default
+  shadow-lg
   flex
   flex-col
   p-2
diff --git a/src/components/DateRangeInput/PDateRangeInput.vue b/src/components/DateRangeInput/PDateRangeInput.vue
index 3512b2472..9dccc680c 100644
--- a/src/components/DateRangeInput/PDateRangeInput.vue
+++ b/src/components/DateRangeInput/PDateRangeInput.vue
@@ -21,7 +21,6 @@
         v-model:start-date="internalStartDate"
         v-model:end-date="internalEndDate"
         v-model:viewing-date="internalViewingDate"
-        class="p-date-input__date-picker"
         v-bind="{ min, max, showTime }"
         @close="close"
       >
diff --git a/src/components/DateRangePicker/PDateRangePicker.vue b/src/components/DateRangePicker/PDateRangePicker.vue
index 7f82e53e9..285de9433 100644
--- a/src/components/DateRangePicker/PDateRangePicker.vue
+++ b/src/components/DateRangePicker/PDateRangePicker.vue
@@ -1,5 +1,12 @@
 <template>
-  <PDatePicker v-model:viewingDate="viewingDate" :model-value="startDate ?? endDate" v-bind="{ min, max }" class="p-date-picker" @update:model-value="update">
+  <PDatePicker
+    v-model:viewingDate="viewingDate"
+    :model-value="startDate ?? endDate"
+    v-bind="{ min, max }"
+    class="p-date-range-picker"
+    @update:model-value="update"
+    @close="close"
+  >
     <template #date="{ date, disabled: dateDisabled, today, inMonth }">
       <div class="p-date-range-picker__date-wrapper" :class="classes.dateWrapper(date)">
         <p-button
@@ -24,15 +31,15 @@
 
     <template #controls>
       <PContent>
-        <PDateTimeInputGroup v-model="selectedStartDate" :show-time="showTime" label="Start Date" />
-        <PDateTimeInputGroup v-model="selectedEndDate" :show-time="showTime" label="End Date" />
+        <PDateTimeInputGroup :model-value="selectedStartDate" :show-time="showTime" label="Start Date" @update:model-value="setStartDateAndTime" />
+        <PDateTimeInputGroup :model-value="selectedEndDate" :show-time="showTime" label="End Date" @update:model-value="setEndDateAndTime" />
       </PContent>
     </template>
   </PDatePicker>
 </template>
 
 <script lang="ts" setup>
-  import { endOfDay, isSameDay, startOfDay } from 'date-fns'
+  import { endOfDay, endOfMinute, isSameDay, startOfDay, startOfMinute } from 'date-fns'
   import { computed, ref } from 'vue'
   import PButton from '@/components/Button/PButton.vue'
   import PDatePicker from '@/components/DatePicker/PDatePicker.vue'
@@ -52,6 +59,7 @@
     'update:startDate': [value: Date | null | undefined],
     'update:endDate': [value: Date | null | undefined],
     'update:viewingDate': [value: Date | null | undefined],
+    'apply': [],
     'close': [],
   }>()
 
@@ -128,9 +136,18 @@
     selectedEndDate.value = value ? endOfDay(value) : value
   }
 
+  function setStartDateAndTime(value: Date | null): void {
+    selectedStartDate.value = value ? startOfMinute(value) : value
+  }
+
+  function setEndDateAndTime(value: Date | null): void {
+    selectedEndDate.value = value ? endOfMinute(value) : value
+  }
+
   function update(): void {
     emit('update:startDate', selectedStartDate.value)
     emit('update:endDate', selectedEndDate.value)
+    emit('apply')
     close()
   }
 
diff --git a/src/components/DateRangeSelect/PDateRangeSelect.vue b/src/components/DateRangeSelect/PDateRangeSelect.vue
new file mode 100644
index 000000000..f7bc2c32c
--- /dev/null
+++ b/src/components/DateRangeSelect/PDateRangeSelect.vue
@@ -0,0 +1,305 @@
+<template>
+  <PPopOver ref="popover" class="p-date-range-select" :placement="placement" auto-close>
+    <template #target="{ open }">
+      <PButton class="p-date-range-select__button" icon="ArrowSmallLeftIcon" :disabled="previousDisabled" @click="previous" />
+      <PButton class="p-date-range-select__button p-date-range-select__input" :disabled="disabled" @click="open">
+        <div class="p-date-range-select__content">
+          <PIcon icon="CalendarIcon" class="shrink-0" />
+          <span class="p-date-range-select__label" :class="classes.label">
+            {{ label }}
+          </span>
+          <PIcon icon="ChevronDownIcon" class="ml-auto shrink-0" />
+        </div>
+      </PButton>
+
+      <template v-if="modelValue && clearable && !disabled">
+        <PButton class="p-date-range-select__button" icon="XCircleIcon" @click="clear" />
+      </template>
+      <PButton class="p-date-range-select__button" icon="ArrowSmallRightIcon" :disabled="nextDisabled" @click="next" />
+    </template>
+
+    <template #default>
+      <div class="p-date-range-select__picker" @click.stop>
+        <template v-if="mode === 'relative'">
+          <PDateRangeSelectOptions :model-value="span" v-bind="{ min, max, maxSpanInSeconds }" @update:model-value="selectSpan" />
+        </template>
+
+        <template v-if="mode === 'range'">
+          <PDateRangePicker
+            v-model:start-date="startDate"
+            v-model:end-date="endDate"
+            v-bind="{ min, max }"
+            show-time
+            @close="close"
+            @apply="selectRange"
+          />
+        </template>
+      </div>
+    </template>
+  </PPopOver>
+</template>
+
+<script lang="ts" setup>
+  import { addDays, addSeconds, differenceInSeconds, isAfter, isBefore, secondsInDay, startOfMinute } from 'date-fns'
+  import { computed, ref, watch } from 'vue'
+  import PButton from '@/components/Button/PButton.vue'
+  import PDateRangePicker from '@/components/DateRangePicker/PDateRangePicker.vue'
+  import PDateRangeSelectOptions, { DateRangeSelectOptionsValue } from '@/components/DateRangeSelect/PDateRangeSelectOptions.vue'
+  import { getDateRangeLabel, getDateSpanLabel, isFullDateRange } from '@/components/DateRangeSelect/utilities'
+  import PIcon from '@/components/Icon/PIcon.vue'
+  import PPopOver from '@/components/PopOver/PPopOver.vue'
+  import { bottomRight, topRight, bottomLeft, topLeft, rightInside, leftInside } from '@/utilities/position'
+
+  type DateRange = { startDate: Date, endDate: Date }
+  export type DateRangeSelectSpanValue = { type: 'span', seconds: number }
+  export type DateRangeSelectRangeValue = { type: 'range', startDate: Date, endDate: Date }
+  export type DateRangeSelectValue = DateRangeSelectSpanValue | DateRangeSelectRangeValue | null | undefined
+
+  const props = defineProps<{
+    modelValue: DateRangeSelectValue,
+    placeholder?: string,
+    maxSpanInSeconds?: number,
+    clearable?: boolean,
+    disabled?: boolean,
+    min?: Date,
+    max?: Date,
+  }>()
+
+  const emit = defineEmits<{
+    'update:modelValue': [DateRangeSelectValue],
+  }>()
+
+  const placement = [bottomLeft, topLeft, bottomRight, topRight, leftInside, rightInside]
+  const popover = ref<InstanceType<typeof PPopOver>>()
+  const mode = ref<'relative' | 'range'>('relative')
+
+  const span = ref<number | null>(null)
+  const startDate = ref<Date | null>(null)
+  const endDate = ref<Date | null>(null)
+
+  const modelValue = computed({
+    get() {
+      return props.modelValue
+    },
+    set(value) {
+      emit('update:modelValue', value)
+    },
+  })
+
+  const placeholder = computed(() => props.placeholder ?? 'Select a time span')
+
+  const label = computed(() => {
+    if (modelValue.value?.type === 'span') {
+      return getDateSpanLabel(modelValue.value.seconds)
+    }
+
+    if (modelValue.value?.type === 'range') {
+      return getDateRangeLabel(modelValue.value)
+    }
+
+    return placeholder.value
+  })
+
+  const classes = computed(() => ({
+    label: {
+      'p-date-range-select__label--placeholder': label.value === placeholder.value,
+    },
+  }))
+
+  function selectSpan(value: DateRangeSelectOptionsValue): void {
+    if (value === 'range') {
+      mode.value = 'range'
+      span.value = null
+      return
+    }
+
+    span.value = value ?? null
+    modelValue.value = value ? { type: 'span', seconds: value } : null
+
+    close()
+  }
+
+  function selectRange(): void {
+    if (startDate.value && endDate.value) {
+      modelValue.value = { type: 'range', startDate: startDate.value, endDate: endDate.value }
+      return
+    }
+
+    modelValue.value = null
+  }
+
+  function getIntervalInSeconds(): number {
+    if (modelValue.value?.type === 'span') {
+      return Math.abs(modelValue.value.seconds)
+    }
+
+    if (modelValue.value?.type === 'range') {
+      const { startDate, endDate } = modelValue.value
+
+      return Math.abs(differenceInSeconds(startDate, endDate))
+    }
+
+    return 0
+  }
+
+  const previousDisabled = computed<boolean>(() => {
+    const seconds = getIntervalInSeconds()
+    const { startDate } = getNewRange(seconds * -1) ?? {}
+
+    if (!startDate || !seconds || props.disabled) {
+      return true
+    }
+
+    if (!props.min) {
+      return false
+    }
+
+    return isBefore(startDate, props.min)
+  })
+
+  function previous(): void {
+    const seconds = getIntervalInSeconds()
+    const range = getNewRange(seconds * -1)
+
+    if (range) {
+      const { startDate, endDate } = range
+      emit('update:modelValue', { type: 'range', startDate, endDate })
+    }
+  }
+
+  const nextDisabled = computed<boolean>(() => {
+    const seconds = getIntervalInSeconds()
+    const { endDate } = getNewRange(seconds) ?? {}
+
+    if (!endDate || !seconds || props.disabled) {
+      return true
+    }
+
+    if (!props.max) {
+      return false
+    }
+
+    return isAfter(endDate, props.max)
+  })
+
+  function next(): void {
+    const seconds = getIntervalInSeconds()
+    const range = getNewRange(seconds)
+
+    if (range) {
+      const { startDate, endDate } = range
+      emit('update:modelValue', { type: 'range', startDate, endDate })
+    }
+  }
+
+  function getCurrentDateRange(): DateRange | null | undefined {
+    if (modelValue.value?.type === 'span') {
+      return getDateRangeForSpan(modelValue.value.seconds)
+    }
+
+    if (modelValue.value?.type === 'range') {
+      return modelValue.value
+    }
+
+    return modelValue.value
+  }
+
+  function getDateRangeForSpan(seconds: number): DateRange {
+    const now = startOfMinute(new Date())
+    const timeSpanIsPast = seconds < 0
+    const startDate = timeSpanIsPast ? addSeconds(now, seconds) : now
+    const endDate = timeSpanIsPast ? now : addSeconds(now, seconds)
+
+    return { startDate, endDate }
+  }
+
+  function getNewRange(seconds: number): DateRange | null {
+    const range = getCurrentDateRange()
+
+    if (!range) {
+      return null
+    }
+
+    const { startDate: currentStartDate, endDate: currentEndDate } = range
+
+    if (isFullDateRange(range)) {
+      const differenceInDays = Math.ceil(Math.abs(seconds) / secondsInDay)
+      const daysToAdd = seconds < 0 ? -differenceInDays : differenceInDays
+      const startDate = addDays(currentStartDate, daysToAdd)
+      const endDate = addDays(currentEndDate, daysToAdd)
+
+      return { startDate, endDate }
+    }
+
+    const startDate = addSeconds(currentStartDate, seconds)
+    const endDate = addSeconds(currentEndDate, seconds)
+
+    return { startDate, endDate }
+  }
+
+  function close(): void {
+    popover.value?.close()
+  }
+
+  function clear(): void {
+    emit('update:modelValue', null)
+  }
+
+  watch(() => popover.value?.visible, (visible) => {
+    if (!visible) {
+      mode.value = 'relative'
+    }
+  })
+</script>
+
+<style>
+.p-date-range-select { @apply
+  w-full
+  flex
+  flex-nowrap
+  items-center
+}
+
+.p-date-range-select__button { @apply
+  rounded-none
+  -ml-[1px]
+}
+
+.p-date-range-select__button:hover { @apply
+  z-10
+}
+
+.p-date-range-select__button:first-child { @apply
+  ml-0
+  rounded-l-default
+}
+
+.p-date-range-select__button:last-child { @apply
+  rounded-r-default
+}
+
+.p-date-range-select__input { @apply
+  grow
+  shrink
+  min-w-0
+}
+
+.p-date-range-select__content { @apply
+  w-full
+  flex
+  items-center
+  gap-2
+  min-w-0
+}
+
+.p-date-range-select__label { @apply
+  shrink
+  min-w-0
+  overflow-hidden
+  whitespace-nowrap
+}
+
+.p-date-range-select__label--placeholder { @apply
+  text-subdued
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DateRangeSelect/PDateRangeSelectOptions.vue b/src/components/DateRangeSelect/PDateRangeSelectOptions.vue
new file mode 100644
index 000000000..9aa308765
--- /dev/null
+++ b/src/components/DateRangeSelect/PDateRangeSelectOptions.vue
@@ -0,0 +1,100 @@
+<template>
+  <PSelectOptions v-model="value" :options="options" class="p-date-range-select-options">
+    <template #pre-options>
+      <div class="p-1">
+        <PTextInput ref="input" v-model="search" placeholder="Enter a unit like &quot;15&quot;" />
+      </div>
+    </template>
+  </PSelectOptions>
+</template>
+
+<script lang="ts" setup>
+  import { addSeconds, isAfter, isBefore, secondsInDay, secondsInHour, secondsInMinute, secondsInMonth, secondsInWeek } from 'date-fns'
+  import { computed, onMounted, ref } from 'vue'
+  import PSelectOptions from '@/components/Select/PSelectOptions.vue'
+  import PTextInput from '@/components/TextInput/PTextInput.vue'
+  import { SelectOption } from '@/types'
+  import { toPluralString } from '@/utilities'
+
+  export type DateRangeSelectOptionsValue = number | 'range' | null | undefined
+
+  const props = defineProps<{
+    modelValue: DateRangeSelectOptionsValue,
+    maxSpanInSeconds?: number,
+    min?: Date,
+    max?: Date,
+  }>()
+
+  const emit = defineEmits<{
+    'update:modelValue': [DateRangeSelectOptionsValue],
+  }>()
+
+  onMounted(() => {
+    input.value?.el?.focus()
+  })
+
+  const value = computed({
+    get() {
+      return props.modelValue
+    },
+    set(value) {
+      emit('update:modelValue', value)
+    },
+  })
+
+  const input = ref<InstanceType<typeof PTextInput>>()
+  const search = ref('')
+
+  const options = computed<SelectOption[]>(() => {
+    const parsed = parseInt(search.value || '1')
+    const unit = isNaN(parsed) ? 1 : parsed
+
+    const spans = [
+      { label: `Past ${unit} ${toPluralString('minute', unit)}`, value: unit * secondsInMinute * -1 },
+      { label: `Past ${unit} ${toPluralString('hour', unit)}`, value: unit * secondsInHour * -1 },
+      { label: `Past ${unit} ${toPluralString('day', unit)}`, value: unit * secondsInDay * -1 },
+      { label: `Past ${unit} ${toPluralString('week', unit)}`, value: unit * secondsInWeek * -1 },
+      { label: `Next ${unit} ${toPluralString('minute', unit)}`, value: unit * secondsInMinute },
+      { label: `Next ${unit} ${toPluralString('hour', unit)}`, value: unit * secondsInHour },
+      { label: `Next ${unit} ${toPluralString('day', unit)}`, value: unit * secondsInDay },
+      { label: `Next ${unit} ${toPluralString('week', unit)}`, value: unit * secondsInWeek },
+    ]
+
+    const now = new Date()
+    const maxSpanInSeconds = props.maxSpanInSeconds ?? secondsInMonth * 2
+
+    const filteredSpans = spans.filter(option => {
+      const time = addSeconds(now, option.value)
+
+      if (props.min && isBefore(time, props.min)) {
+        return false
+      }
+
+      if (props.max && isAfter(time, props.max)) {
+        return false
+      }
+
+      if (maxSpanInSeconds) {
+        return Math.abs(option.value) < maxSpanInSeconds
+      }
+
+      return true
+    })
+
+    return [
+      ...filteredSpans,
+      { label: 'Select from calendar', value: 'range' },
+    ]
+  })
+</script>
+
+<style>
+.p-date-range-select-options {
+  min-width: 300px;
+}
+
+.p-date-range-select-options,
+.p-date-range-select-options .p-select-options__options {
+  max-height: 400px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DateRangeSelect/index.ts b/src/components/DateRangeSelect/index.ts
new file mode 100644
index 000000000..12f04cce1
--- /dev/null
+++ b/src/components/DateRangeSelect/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import PDateRangeSelect from '@/components/DateRangeSelect/PDateRangeSelect.vue'
+
+const install = (app: App): void => {
+  app.component('PDateRangeSelect', PDateRangeSelect)
+}
+
+export { PDateRangeSelect, install }
\ No newline at end of file
diff --git a/src/components/DateRangeSelect/utilities.ts b/src/components/DateRangeSelect/utilities.ts
new file mode 100644
index 000000000..d7c08f954
--- /dev/null
+++ b/src/components/DateRangeSelect/utilities.ts
@@ -0,0 +1,53 @@
+import { addSeconds, endOfDay, format, intervalToDuration, isSameDay, startOfDay } from 'date-fns'
+import { toPluralString } from '@/utilities'
+
+type DateRange = {
+  startDate: Date,
+  endDate: Date,
+}
+
+const dateFormat = 'MMM do, yyyy'
+const timeFormat = 'hh:mm a'
+const dateTimeFormat = `${dateFormat} 'at' ${timeFormat}`
+
+export function getDateSpanLabel(seconds: number): string {
+
+  const now = new Date()
+  const duration = intervalToDuration({
+    start: now,
+    end: addSeconds(now, seconds),
+  })
+
+  const reduced = Object.entries(duration).reduce<string[]>((durations, [key, value]) => {
+    if (value) {
+      const unit = key.slice(0, -1)
+      durations.push(`${value} ${toPluralString(unit, value)}`)
+    }
+
+    return durations
+  }, [])
+
+  const direction = seconds < 0 ? 'Past' : 'Next'
+
+  return `${direction} ${reduced.join(' ')}`
+}
+
+export function getDateRangeLabel({ startDate, endDate }: DateRange): string {
+  if (isPickerSingleDayRange({ startDate, endDate })) {
+    return format(startDate, dateFormat)
+  }
+
+  if (isFullDateRange({ startDate, endDate })) {
+    return `${format(startDate, dateFormat)} - ${format(endDate, dateFormat)}`
+  }
+
+  return `${format(startDate, dateTimeFormat)} - ${format(endDate, dateTimeFormat)}`
+}
+
+function isPickerSingleDayRange({ startDate, endDate }: DateRange): boolean {
+  return isFullDateRange({ startDate, endDate }) && isSameDay(startDate, endDate)
+}
+
+export function isFullDateRange({ startDate, endDate }: DateRange): boolean {
+  return startOfDay(startDate).getTime() === startDate.getTime() && endOfDay(endDate).getTime() === endDate.getTime()
+}
\ No newline at end of file
diff --git a/src/components/DateTimeInputGroup/PDateTimeInputGroup.vue b/src/components/DateTimeInputGroup/PDateTimeInputGroup.vue
index f679a361f..167434cd9 100644
--- a/src/components/DateTimeInputGroup/PDateTimeInputGroup.vue
+++ b/src/components/DateTimeInputGroup/PDateTimeInputGroup.vue
@@ -10,10 +10,10 @@
     </template>
 
     <PContent secondary>
-      <PNativeDateInput v-model="date" disable-picker />
+      <PNativeDateInput v-model="startDate" disable-picker />
 
       <template v-if="showTime">
-        <PNativeTimeInput v-model="date" disable-picker />
+        <PNativeTimeInput v-model="startTime" disable-picker />
       </template>
     </PContent>
   </PLabel>
@@ -38,7 +38,7 @@
     (event: 'update:modelValue', value: Date | null): void,
   }>()
 
-  const date = computed({
+  const startDate = computed({
     get() {
       return props.modelValue ?? null
     },
@@ -47,6 +47,18 @@
     },
   })
 
+  const startTime = computed({
+    get() {
+      return props.modelValue ?? null
+    },
+    set(value) {
+      if (!value) {
+        return
+      }
+
+      emit('update:modelValue', value)
+    },
+  })
   const nowOrTodayLabel = computed(() => props.showTime ? 'Now' : 'Today')
 
   function setToTodayOrNow(): void {
diff --git a/src/components/NativeDateInput/PNativeDateInput.vue b/src/components/NativeDateInput/PNativeDateInput.vue
index 85408a9fa..dca50cd0c 100644
--- a/src/components/NativeDateInput/PNativeDateInput.vue
+++ b/src/components/NativeDateInput/PNativeDateInput.vue
@@ -64,7 +64,14 @@
   })
 
   const stringMin = computed(() => props.min ? format(props.min, 'yyyy-MM-dd') : undefined)
-  const stringMax = computed(() => props.max ? format(props.max, 'yyyy-MM-dd') : undefined)
+  const stringMax = computed(() => {
+    if (props.max) {
+      return format(props.max, 'yyyy-MM-dd')
+    }
+
+    // max date with a 4 digit year
+    return '2999-12-31'
+  })
 
   function showPicker(): void {
     inputElement.value?.showPicker()
diff --git a/src/components/SelectOption/PSelectOption.vue b/src/components/SelectOption/PSelectOption.vue
index b2d088115..1d9255a96 100644
--- a/src/components/SelectOption/PSelectOption.vue
+++ b/src/components/SelectOption/PSelectOption.vue
@@ -125,6 +125,7 @@
   flex
   gap-2
   items-center
+  cursor-pointer
 }
 
 .p-select-option--selected { @apply
diff --git a/src/components/index.ts b/src/components/index.ts
index e08f47f61..f3e636ff3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -21,6 +21,7 @@ import { PDateInput, install as installPDateInput } from '@/components/DateInput
 import { PDatePicker, install as installPDatePicker } from '@/components/DatePicker'
 import { PDateRangeInput, install as installPDateRangeInput } from '@/components/DateRangeInput'
 import { PDateRangePicker, install as installPDateRangePicker } from '@/components/DateRangePicker'
+import { PDateRangeSelect, install as installPDateRangeSelect } from '@/components/DateRangeSelect'
 import { PDialog, install as installPDialog } from '@/components/Dialog'
 import { PDivider, install as installPDivider } from '@/components/Divider'
 import { PDrawer, install as installPDrawer } from '@/components/Drawer'
@@ -111,6 +112,7 @@ export {
   PDatePicker,
   PDateRangeInput,
   PDateRangePicker,
+  PDateRangeSelect,
   PDialog,
   PDivider,
   PDrawer,
@@ -212,6 +214,7 @@ export const installs = [
   installPDatePicker,
   installPDateRangeInput,
   installPDateRangePicker,
+  installPDateRangeSelect,
   installPDialog,
   installPDivider,
   installPDrawer,
@@ -303,6 +306,7 @@ declare module '@vue/runtime-core' {
     PDatePicker: typeof PDatePicker,
     PDateRangeInput: typeof PDateRangeInput,
     PDateRangePicker: typeof PDateRangePicker,
+    PDateRangeSelect: typeof PDateRangeSelect,
     PDialog: typeof PDialog,
     PDivider: typeof PDivider,
     PDrawer: typeof PDrawer,