Merge pull request #1048 from PrefectHQ/date-range-select

Feature: PDateRangeSelect

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>

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'),

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

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

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"
       >

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()
   }