diff --git a/docs/components/datetime-picker.md b/docs/components/datetime-picker.md
index dba2af5593..af82ad052e 100644
--- a/docs/components/datetime-picker.md
+++ b/docs/components/datetime-picker.md
@@ -6,13 +6,13 @@
 
 ### Single date
 
-Create a single date selection calendar, with an example of passing in a fixed pixel width for the input field, and an empty string for `currentValue` which defaults the input to the placeholder message.
+Create a single date selection calendar, with an example of passing in a fixed pixel width for the input field, and null values for the `start` and `end` keys, which causes the input to display the placeholder message.
 
-Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
+Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model). Mode is set to `date`, which results in a calendar, but no timepicker.
 
 <ClientOnly>
   <KDateTimePicker
-    v-model="currentValue0"
+    v-model="singleDateEmpty"
     clear-button
     placeholder="Please select a date"
     mode="date"
@@ -20,36 +20,35 @@ Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
     :range="false"
   />
   <br/>
-  <div>Emitted value: <pre class="json hide-from-percy">{{ JSON.stringify(currentValue0) }}</pre></div>
+  <div>Emitted value: <pre class="json hide-from-percy">{{ singleDateEmpty }}</pre></div>
 </ClientOnly>
 
 ```html
 <KDateTimePicker
   v-model="currentValue"
   @change="newVal => emitVal = newVal"
-  :range="false"
   clear-button
   placeholder="Please select a date"
   mode="date"
   width="250"
+  :range="false"
 />
 ```
 
 ### Single date and time
 
-Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
+Setting the `v-model` to [Single date time picker](#single-date-time-picker-v-model) with a `start` value of `new Date()` will initialize the datepicker with today's date. Mode is set to `dateTime`, which results in a calendar, and a timepicker.
 
 <ClientOnly>
   <KDateTimePicker
-    v-model="currentValue1"
+    v-model="singleDateToday"
     clear-button
     placeholder="Please select a date and time"
     mode="dateTime"
-    :minute-increment="5"
     :range="false"
   />
   <br/>
-  <div>Emitted value: <pre class="json hide-from-percy">{{ JSON.stringify(currentValue1) }}</pre></div>
+  <div>Emitted value: <pre class="json hide-from-percy">{{ singleDateToday }}</pre></div>
 </ClientOnly>
 
 ```html
@@ -59,25 +58,24 @@ Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
   clear-button
   placeholder="Please select a date and time"
   mode="dateTime"
-  :minute-increment="5"
   :range="false"
 />
 ```
 
 ### Date range
 
-Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
+Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model).
 
 <ClientOnly>
   <KDateTimePicker
-    v-model="currentValue2"
+    v-model="dateRangeWeek"
     clear-button
     placeholder="Please select a date range"
     mode="date"
     :range="true"
   />
   <br/>
-  <div>Emitted value: <pre class="json hide-from-percy">{{ currentValue2 }}</pre></div>
+  <div>Emitted value: <pre class="json hide-from-percy">{{ dateRangeWeek }}</pre></div>
 </ClientOnly>
 
 ```html
@@ -97,15 +95,14 @@ Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
 
 <ClientOnly>
   <KDateTimePicker
-    v-model="currentValue3"
+    v-model="dateRangeWeek"
     clear-button
     placeholder="Please select a date and time"
     mode="dateTime"
-    :minute-increment="5"
     :range="true"
   />
   <br/>
-  <div>Emitted value: <pre class="json hide-from-percy">{{ currentValue3 }}</pre></div>
+  <div>Emitted value: <pre class="json hide-from-percy">{{ dateRangeWeek }}</pre></div>
 </ClientOnly>
 
 ```html
@@ -115,7 +112,6 @@ Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
   clear-button
   placeholder="Please select a date and time"
   mode="dateTime"
-  :minute-increment="5"
   :range="true"
 />
 ```
@@ -124,23 +120,23 @@ Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
 
 Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
 
-Display both a calendar and relative time frames, passing in a preset week-long range. Hide the time.
-This instance also makes use of the `minDate` and `maxDate` parameters, which are both optional.
+Display both a calendar and relative time frames, passing in a preset week-long range. The `mode` is set to `relativeDate`, which only shows monthly calendar.
+
+This instance makes use of the optional `minDate` and `maxDate` parameters.
 
 <ClientOnly>
   <KDateTimePicker
-    v-model="currentValue4"
+    v-model="dateRangeWeek"
     placeholder="Please select a range"
     mode="relativeDate"
     width="415"
     :min-date="minDate"
     :max-date="maxDate"
-    :minute-increment="5"
     :range="true"
     :time-periods="exampleTimeFrames"
   />
   <br/>
-  <div>Emitted value: <pre class="json hide-from-percy">{{ currentValue4 }}</pre></div>
+  <div>Emitted value: <pre class="json hide-from-percy">{{ dateRangeWeek }}</pre></div>
 </ClientOnly>
 
 ```html
@@ -152,7 +148,6 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
   width="415"
   :min-date="minDate"
   :max-date="maxDate"
-  :minute-increment="5"
   :range="true"
   :time-periods="[
     {
@@ -186,23 +181,23 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
 
 Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
 
-Display both a calendar and relative time frames, passing in a preset week-long range.
-This instance also makes use of the `minDate` and `maxDate` parameters, which are both optional.
+Display both a calendar and relative time frames, passing in a preset week-long range. This instance makes use of the optional `minDate` and `maxDate` parameters. 
+
+Passing in a `timePeriodsKey` causes the instance to default to the "Relative" tab.
 
 <ClientOnly>
   <KDateTimePicker
-    v-model="currentValue5"
+    v-model="dateRangeWeekRelative"
     placeholder="Please select a range"
     mode="relativeDateTime"
     width="415"
     :min-date="minDate"
     :max-date="maxDate"
-    :minute-increment="5"
     :range="true"
     :time-periods="exampleTimeFrames"
   />
   <br/>
-  <div>Emitted value: <pre class="json hide-from-percy">{{ currentValue5 }}</pre></div>
+  <div>Emitted value: <pre class="json hide-from-percy">{{ dateRangeWeekRelative }}</pre></div>
 </ClientOnly>
 
 ```html
@@ -214,7 +209,6 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
   width="415"
   :min-date="minDate"
   :max-date="maxDate"
-  :minute-increment="5"
   :range="true"
   :time-periods="[
     {
@@ -244,16 +238,16 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
 />
 ```
 
-### Relative date and time
+### Relative date and time only 
 
-Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
-This utilizes the same time frames as the previous example; however, in this example we are passing in a pre-selected time frame.
+Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model).
+This utilizes the same time frames as the previous example; however, in this case we are passing in a pre-selected time frame of one hour, and.
 
 <ClientOnly>
   <KDateTimePicker
-    v-model="currentValue6"
+    v-model="oneHourRelativeOnly"
     placeholder="Please select a time frame"
-    mode="relative"
+    mode="relativeDate"
     width="480"
     :min-date="minDate"
     :max-date="maxDate"
@@ -261,7 +255,7 @@ This utilizes the same time frames as the previous example; however, in this exa
     :time-periods="exampleTimeFrames"
   />
   <br/>
-  <div>Emitted value: <pre class="json hide-from-percy">{{ currentValue6 }}</pre></div>
+  <div>Emitted value: <pre class="json hide-from-percy">{{ oneHourRelativeOnly }}</pre></div>
 </ClientOnly>
 
 ```html
@@ -308,13 +302,13 @@ This utilizes the same time frames as the previous example; however, in this exa
 
 #### Single date time picker `v-model`
 
-A single date or time picker instance which can be seeded with a value as shown here, where `currentValue` is a valid Date object, eg: `new Date()` or an empty string, eg: `''` which will display the placeholder message.
+A single date or time picker instance which can be seeded with a value as shown here, where `currentValue`'s `start` key contains a valid Date object, `new Date()` or a `null` value.  If null, the picker will display the placeholder message and allow the user to make a selection. 
 
 ```ts
-<KDateTimePicker
-  v-model="currentValue"
-  ...
-/>
+currentValue = {
+  start: new Date(),
+  end: null,
+},
 ```
 
 #### Range date time picker `v-model`
@@ -325,8 +319,8 @@ Can be seeded with a **relative time frame** by setting the `v-model` to `curren
 
 ```ts
 currentValue = {
-  start: '',
-  end: '',
+  start: null,
+  end: null,
   timePeriodsKey: TimeframeKeys.ONE_DAY
 },
 ```
@@ -365,12 +359,6 @@ A valid `Date` object (eg: `Mon Aug 15 2022 08:00:00 GMT-0700 (Pacific Daylight
 
 A valid `Date` object (eg: `Fri Aug 19 2022 12:00:00 GMT-0700 (Pacific Daylight Time)`) which blocks out days/times that occur **after** the given timestamp. `maxDate` gets passed down to the calendar component, and does not apply to relative time frames.
 
-**default**: `null`
-
-### minuteIncrement
-
-A `Number` which sets the custom interval for the Minutes select dropdown.
-
 **default**: `5`
 
 ### mode
@@ -391,7 +379,7 @@ Required `String` prop which accepts the following values:
 
 ### range
 
-`Boolean` which determines whether the calendar allows selection of a **single** date or time, as opposed to a **range** of start and end values.
+`Boolean` which determines whether the calendar allows selection of a **single** date or time, as opposed to a **range** of start and end values. Choosing any relative `mode` option will default the `range` to `true`.
 
 **default**: `false`
 
@@ -434,16 +422,20 @@ An array of time frame values to be displayed as buttons in the "Relative" secti
 
 ## Events
 
-The events below will fire whenever **Apply** is clicked (assuming the user has made a custom calendar or relative timeframe selection). If **Clear** is clicked, the object shape remains the same, but the values are empty strings.
+The events below will fire whenever **Apply** is clicked (assuming the user has made a custom calendar or relative timeframe selection). If **Clear** is clicked, the object shape remains the same, but the `start` and `end` values will be `null`.
 
 ### Single date time picker
 
 **Events**: `change`, `update:modelValue`
 
-Will emit a JavaScript Date object, or an empty string  "Clear".
+Component will emit a JavaScript Date object for the `start` value, and a null value for `end`. 
+When "Clear" is clicked, it will emit null values for both `start` and `end`.
 
 ```ts
-"2022-09-06T19:45:54.406Z"  // ISO 8601 Date string
+{
+  start: "2022-09-06T19:45:54.406Z",
+  end: null,
+},
 ```
 
 ### Range date time picker
@@ -457,7 +449,7 @@ Will emit an `object` containing the following values:
   "start": "2022-09-06T19:45:54.406Z",  // ISO 8601 Date string
   "end": "2022-09-07T19:45:54.406Z", // ISO 8601 Date string
   "timePeriodsKey": "24h" // or "" if not applicable
-}
+} 
 ```
 
 <script>
@@ -501,36 +493,27 @@ export default {
     const aWeekAgo    = new Date(today.getTime() - (7*24*60*60*1000))
     const aYearAgo    = new Date(today.getTime() - (365*24*60*60*1000))
     return {
-      currentValue0: new Date(),
-      currentValue1: new Date(),
-      currentValue2: {
-        start: twoDaysAgo,
-        end: today
+      singleDateEmpty: {
+        start: null,
+        end: null
       },
-      currentValue3: {
-        start: twoDaysAgo,
-        end: today
+      singleDateToday: {
+        start: today,
+        end: null
       },
-      currentValue4: {
-        start: twoDaysAgo,
-        end: today
-      },
-      currentValue5: {
+      dateRangeWeek: {
         start: aWeekAgo,
         end: today
       },
-      currentValue6: {
+      dateRangeWeekRelative: {
         start: aWeekAgo,
         end: today,
         timePeriodsKey: TimeframeKeys.SEVEN_DAY
       },
-      rangeTwoday: {
-        start: twoDaysAgo,
-        end: today
-      },
-      rangeWeek: {
-        start: aWeekAgo,
-        end: today
+      oneHourRelativeOnly: {
+        start: null,
+        end: null,
+        timePeriodsKey: TimeframeKeys.ONE_HOUR
       },
       maxDate: today,
       minDate: aYearAgo,
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 043e47492e..9759b042a2 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -139,6 +139,21 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KDateTimePicker
 
+#### Props
+
+* `v-model` Single date and time picker's seed value (string in ISO date format) has been changed to a `TimeRange` object whose `start` value will be set to a Date ISO string; `end` value will be set to `null`.
+
+  See KDateTimePickers's [v-model](/components/datetime-picker#v-model) for more details
+
+#### Events
+
+* `change`, `update:modelValue` – a Single date and time picker will no longer emit an ISO date format string. Instead, a `TimeRange` object with a Date ISO string `start` value, and a null `end` value will be emitted.
+  
+  See KDateTimePickers's [Single date time picker events](/components/datetime-picker#single-date-time-picker) for more details
+
+#### Constants, Types & Interfaces
+
+* `TimeRange` - `start` and `end` keys are now defined as `Date | null`
 
 ### KDropdownMenu
 
diff --git a/package.json b/package.json
index 934d539c3f..aa46f1633e 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "sortablejs": "^1.15.0",
     "swrv": "^1.0.4",
     "uuid": "^9.0.1",
-    "v-calendar": "^3.0.3",
+    "v-calendar": "^3.1.2",
     "vue-draggable-next": "^2.2.1"
   },
   "peerDependencies": {
diff --git a/src/components/KDateTimePicker/KDateTimePicker.cy.ts b/src/components/KDateTimePicker/KDateTimePicker.cy.ts
index 3a7fd5b5c7..a62bb3fe91 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.cy.ts
+++ b/src/components/KDateTimePicker/KDateTimePicker.cy.ts
@@ -39,9 +39,20 @@ const todayDateTimeString = format(new Date(today), 'PP hh:mm a')
 const twoDaysAgo = new Date(today.getTime() - (2 * 24 * 60 * 60 * 1000))
 const minDate = new Date(today.getTime() - (365 * 24 * 60 * 60 * 1000))
 const maxDate = today
+const singleDate = {
+  start: today,
+  end: null,
+  timePeriodsKey: '',
+}
 const defaultTimeRange = {
   start: twoDaysAgo,
   end: today,
+  timePeriodsKey: TimeframeKeys.ONE_DAY,
+}
+const emptyTimeRange = {
+  start: null,
+  end: null,
+  timePeriodKey: null,
 }
 
 const timepickerInput = 'k-datetime-picker-input'
@@ -54,9 +65,9 @@ describe('KDateTimePicker', () => {
     mount(KDateTimePicker, {
       props: {
         mode: 'date',
-        modelValue: today,
-        range: false,
+        modelValue: singleDate,
         icon: false,
+        range: false,
       },
     })
 
@@ -68,28 +79,29 @@ describe('KDateTimePicker', () => {
   it('renders with clear button', () => {
     mount(KDateTimePicker, {
       props: {
-        mode: 'date',
-        modelValue: today,
+        mode: 'dateTime',
+        modelValue: singleDate,
         clearButton: true,
-        range: false,
         icon: false,
+        range: false,
       },
     })
 
     cy.getTestId(timepickerInput).should('exist')
     cy.getTestId(clearButton).should('exist')
+    cy.getTestId(timepickerInput).should('contain.text', todayDateTimeString)
   })
 
-  it('renders a single date picker with placeholder message and correct width', () => {
+  it('renders a date picker with placeholder message and correct width', () => {
     const placeholderText = 'Customer-facing message'
     const width = 500
 
     mount(KDateTimePicker, {
       props: {
+        clearButton: true,
         mode: 'date',
-        modelValue: today,
+        modelValue: singleDate,
         placeholder: placeholderText,
-        clearButton: true,
         range: false,
         width: width + '',
       },
@@ -107,12 +119,12 @@ describe('KDateTimePicker', () => {
     cy.getTestId(timepickerInput).should('contain.text', placeholderText)
   })
 
-  it('renders range date picker', () => {
+  it('renders a date picker', () => {
     mount(KDateTimePicker, {
       props: {
         mode: 'date',
-        modelValue: defaultTimeRange,
-        range: true,
+        modelValue: singleDate,
+        range: false,
       },
     })
     cy.getTestId(timepickerInput).should('exist')
@@ -125,7 +137,7 @@ describe('KDateTimePicker', () => {
     mount(KDateTimePicker, {
       props: {
         mode: 'dateTime',
-        modelValue: today,
+        modelValue: singleDate,
         range: false,
       },
     })
@@ -141,10 +153,9 @@ describe('KDateTimePicker', () => {
       props: {
         mode: 'dateTime',
         modelValue: defaultTimeRange,
-        range: true,
-        minuteIncrement: '5',
         minDate,
         maxDate,
+        range: true,
       },
     })
 
@@ -160,8 +171,8 @@ describe('KDateTimePicker', () => {
       props: {
         mode: 'date',
         clearButton: true,
-        modelValue: today,
-        range: false,
+        modelValue: defaultTimeRange,
+        range: true,
       },
     })
 
@@ -175,10 +186,10 @@ describe('KDateTimePicker', () => {
   it('disables "Apply" button when "Clear" is clicked', () => {
     mount(KDateTimePicker, {
       props: {
-        mode: 'date',
-        modelValue: today,
         clearButton: true,
-        range: false,
+        mode: 'date',
+        modelValue: defaultTimeRange,
+        range: true,
       },
     })
 
@@ -197,7 +208,7 @@ describe('KDateTimePicker', () => {
     mount(KDateTimePicker, {
       props: {
         mode: 'date',
-        modelValue: today,
+        modelValue: singleDate,
         range: false,
       },
     })
@@ -214,7 +225,7 @@ describe('KDateTimePicker', () => {
     mount(KDateTimePicker, {
       props: {
         mode: 'relative',
-        modelValue: today,
+        modelValue: defaultTimeRange,
         range: true,
         timePeriods: exampleTimeFrames,
       },
@@ -234,9 +245,9 @@ describe('KDateTimePicker', () => {
       props: {
         mode: 'dateTime',
         modelValue: defaultTimeRange,
-        range: true,
         minDate,
         maxDate,
+        range: true,
         timePeriods: exampleTimeFrames,
       },
     })
@@ -256,7 +267,7 @@ describe('KDateTimePicker', () => {
     mount(KDateTimePicker, {
       props: {
         mode: 'relativeDate',
-        modelValue: today,
+        modelValue: defaultTimeRange,
         range: true,
         timePeriods: exampleTimeFrames,
       },
@@ -268,4 +279,59 @@ describe('KDateTimePicker', () => {
     cy.get('.k-datetime-picker .vc-pane-container .vc-weeks').should('exist')
     cy.get('.k-datetime-picker .vc-pane-container .vc-time-picker').should('not.exist')
   })
+
+  it('renders date only calendar and displays time range in `PP` format', () => {
+    mount(KDateTimePicker, {
+      props: {
+        mode: 'date',
+        range: true,
+        modelValue: defaultTimeRange,
+      },
+    })
+
+    cy.getTestId(timepickerInput).find('.timepicker-display').should('contain.text', todayDateString)
+  })
+
+  it('renders relativeDateTime calendar and displays time range in `PP hh:mm a` format', () => {
+    mount(KDateTimePicker, {
+      props: {
+        mode: 'dateTime',
+        modelValue: defaultTimeRange,
+        range: true,
+      },
+    })
+
+    cy.getTestId(timepickerInput).find('.timepicker-display').should('contain.text', todayDateTimeString)
+  })
+
+  it('renders calendar, even if seeded with an invalid date range', () => {
+    const placeholderText = 'Please choose valid start and end dates'
+
+    mount(KDateTimePicker, {
+      props: {
+        mode: 'relativeDate',
+        modelValue: emptyTimeRange,
+        placeholder: placeholderText,
+        range: true,
+        timePeriods: exampleTimeFrames,
+      },
+    })
+
+    cy.getTestId(timepickerInput).click()
+    cy.getTestId(segmentedToggle).find('button[name="custom"]').eq(0).click()
+
+    cy.get('.k-datetime-picker .vc-pane-container .vc-weeks').should('exist')
+    cy.get('.k-datetime-picker .vc-pane-container .vc-time-picker').should('not.exist')
+
+    cy.getTestId(timepickerInput).find('.timepicker-display').should('contain.text', placeholderText)
+
+    // "Apply" button should be disabled
+    cy.getTestId(submitButton).should('be.disabled')
+
+    // If a timeframe is selected, "Apply" should be re-enabled
+    cy.getTestId(segmentedToggle).find('button[name="relative"]').eq(0).click()
+    cy.getTestId('select-timeframe-86400000').click()
+    cy.getTestId(submitButton).eq(0).click()
+    cy.getTestId(timepickerInput).find('.timepicker-display').should('contain.text', 'Last 24 hours')
+  })
 })
diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index 5e680ee3d5..4c3e5f818f 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -22,11 +22,10 @@
         size="large"
         :style="widthStyle"
       >
-        <KIcon
+        <CalIcon
           v-if="icon"
           class="calendar-icon"
-          :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
-          icon="calendar"
+          :color="KUI_COLOR_TEXT_NEUTRAL"
           :size="KUI_ICON_SIZE_30"
         />
         <div
@@ -51,7 +50,7 @@
           ]"
           @click="(selected: string) => state.tabName = selected"
         />
-        <!-- Single date / time or range readout -->
+        <!-- Time range readout -->
         <p
           v-if="!showCalendar"
           class="range-display"
@@ -60,19 +59,19 @@
         </p>
         <DatePicker
           v-if="hasCalendar && showCalendar"
-          v-model="selectedCalendarRange"
+          v-model="calendarVModel"
           :drag-attribute="calendarDragAttributes"
           is-expanded
-          :is-range="range"
+          :is-range="!isSingleDatepicker"
           :max-date="maxDate"
           :min-date="minDate"
-          :minute-increment="minuteIncrement"
           :mode="impliedMode"
           :model-config="modelConfig"
+          :rules="vCalendarRules"
           :select-attribute="calendarSelectAttributes"
         />
         <div
-          v-else-if="hasTimePeriods"
+          v-else-if="hasTimePeriods && !isSingleDatepicker"
           class="relative-periods-container"
         >
           <div
@@ -138,13 +137,13 @@ import { format } from 'date-fns'
 import { formatInTimeZone } from 'date-fns-tz'
 import { DatePicker } from 'v-calendar'
 import KButton from '@/components/KButton/KButton.vue'
-import KIcon from '@/components/KIcon/KIcon.vue'
 import KPop from '@/components/KPop/KPop.vue'
 import KSegmentedControl from '@/components/KSegmentedControl/KSegmentedControl.vue'
 import 'v-calendar/dist/style.css'
-import type { DateTimePickerState, TimeFrameSection, TimePeriod, TimeRange, Mode, CSSProperties } from '@/types'
-import { ModeArray } from '@/types'
+import { ModeArray, ModeArrayCustom, ModeArrayRelative, ModeDateOnly, TimepickerMode } from '@/types'
+import type { DateTimePickerState, TimeFrameSection, TimePeriod, TimeRange, Mode, CSSProperties, DatePickerModel } from '@/types'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import { CalIcon } from '@kong/icons'
 
 const props = defineProps({
   clearButton: {
@@ -158,13 +157,11 @@ const props = defineProps({
     default: true,
   },
   modelValue: {
-    type: [Object, Date, String] as PropType<TimeRange | Date | string>,
+    type: Object as PropType<TimeRange>,
     required: false,
-    default: '',
-    validator: (value: TimeRange | string): boolean => {
-      return typeof value === 'string'
-        ? value === ''
-        : value instanceof Date || (value.start !== undefined && value.end !== undefined)
+    default: () => ({ start: null, end: null }),
+    validator: (value: TimeRange): boolean => {
+      return value instanceof Date || (value.start !== undefined && value.end !== undefined)
     },
   },
   /**
@@ -183,14 +180,6 @@ const props = defineProps({
     required: false,
     default: null,
   },
-  /**
-   * Sets a custom interval for the minute select dropdown
-   */
-  minuteIncrement: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
   /**
    * Determines which `v-calendar` type to initialize.
    * - { `date`, `time`, `dateTime` } are passed verbatim to `v-calendar`,
@@ -259,8 +248,8 @@ const props = defineProps({
 })
 
 const emit = defineEmits<{
-  (e: 'change', value: TimeRange | string | Date): void
-  (e: 'update:modelValue', value: TimeRange | string | Date): void
+  (e: 'change', value: TimeRange | null): void
+  (e: 'update:modelValue', value: TimeRange | null): void
 }>()
 
 // https://vcalendar.io/datepicker.html#model-config
@@ -286,18 +275,33 @@ const calendarDragAttributes = {
   },
 } as any
 
-const selectedCalendarRange = ref<TimeRange | Date | string>(props.modelValue)
-
-const hasCalendar = computed((): boolean => props.mode !== 'relative')
+// Booleans
+const hasCalendar = computed((): boolean => props.mode !== TimepickerMode.Relative)
+const isSingleDatepicker = computed((): boolean => ModeArrayCustom.includes(props.mode) && !props.range)
 const hasTimePeriods = computed((): boolean => props?.timePeriods?.length > 0)
 const showCalendar = computed((): boolean => state.tabName === 'custom' || !hasTimePeriods.value)
-const submitDisabled = computed((): boolean => {
-  // If either the calendar is in range selection mode, or relative time frames
-  // are present, check whether both `start` and `end` are set;
-  // Otherwise, it's a single date or time, so only check `start`
-  return props.range || hasTimePeriods.value
-    ? !state.selectedRange.start || !state.selectedRange.end
-    : !state.selectedRange.start
+const submitDisabled = ref<boolean>(true)
+
+const defaultTimeRange: TimeRange = {
+  start: null,
+  end: null,
+  timePeriodsKey: '',
+}
+
+/**
+ * Dynamically choose the v-model
+ * Single date is a Date, whereas a Date range is an object containing `start` and `end` dates
+ */
+const calendarSingleDate = ref<Date|null>(props.modelValue?.start)
+const calendarRange = ref<TimeRange>(props.modelValue || defaultTimeRange)
+const calendarVModel = isSingleDatepicker.value
+  ? calendarSingleDate as DatePickerModel
+  : calendarRange as DatePickerModel
+
+// `minute-increment` has been deprecated in favor of the time `rules` object
+// https://vcalendar.io/datepicker/time-rules.html
+const vCalendarRules = ref({
+  minutes: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55],
 })
 
 const widthStyle = computed((): CSSProperties => {
@@ -307,12 +311,12 @@ const widthStyle = computed((): CSSProperties => {
 })
 
 const impliedMode = computed((): string => {
-  if (props.mode === 'relativeDateTime') {
+  if (props.mode === TimepickerMode.RelativeDateTime) {
     return 'dateTime'
-  } else if (props.mode === 'relativeDate') {
+  } else if (props.mode === TimepickerMode.RelativeDate) {
     return 'date'
   } else {
-    // Values that are safe to be passed verbatim to v-calendar
+    // Modes that are safe to be passed verbatim to v-calendar
     return props.mode
   }
 })
@@ -327,44 +331,53 @@ const state = reactive<DateTimePickerState>({
   previouslySelectedRange: { start: new Date(), end: new Date(), timePeriodsKey: '' },
   selectedTimeframe: props.timePeriods[0]?.values[0],
   previouslySelectedTimeframe: props.timePeriods[0]?.values[0],
-  tabName: 'custom',
+  tabName: 'relative',
 })
 
 /**
-     * Updates our internal (read: separate) state of currently selected `v-calendar` value(s)
-     * @param {object | string | null} vCalValue Object containing a pair of `start` and `end` timestamps,
-     * or a single timestamp. Can be `null` if current selection is cleared.
-     */
-const changeCalendarRange = (vCalValue: TimeRange | Date | number | string): void => {
-  let start: Date | number, end: Date | number
-
-  if (vCalValue) {
-    // If value is an object, this is a time range. Else, a single date or time value.
-    if ((vCalValue as TimeRange).start && (vCalValue as TimeRange).end) {
-      start = new Date((vCalValue as TimeRange).start)
-      end = new Date((vCalValue as TimeRange).end)
-    } else {
-      start = new Date(Number(vCalValue))
-      end = 0
-    }
+ * Tracks internal `v-calendar` state
+ * @param {TimeRange | Date | string} vCalValue Object containing a pair of `start` and `end` timestamps.
+ * Defaults to today's date if current selection is cleared.
+ */
+const changeCalendarRange = (vCalValue: TimeRange | null): void => {
+  if (!vCalValue) return
 
-    // Set emitted value when v-calendar selection is made. In the case of a single date / time
-    // picker, only the `start` value will be provided.
-    // The `timePeriodsKey` param only applies to relative timeframes,
-    // not `v-calendar` selections; however, this keeps the object "shape" consistent.
-    state.selectedRange = state.previouslySelectedRange = {
-      start,
-      end,
-      timePeriodsKey: '',
-    }
+  const isCleared = !isSingleDatepicker.value
+    ? !(vCalValue as TimeRange).start || !(vCalValue as TimeRange).end
+    : !(vCalValue as TimeRange).start
+
+  const start: Date | number | null = vCalValue?.start || new Date()
+  const end: Date | number | null = vCalValue?.end || null
+
+  submitDisabled.value = !!isCleared
+
+  /**
+   * Set our v-calendar v-model
+   */
+  if (!isSingleDatepicker.value && vCalValue && (vCalValue as TimeRange).start && (vCalValue as TimeRange).end) {
+    calendarRange.value.start = start
+    calendarRange.value.end = end
+  } else if (vCalValue && (vCalValue as TimeRange).start) {
+    calendarSingleDate.value = start
+  }
+
+  /**
+   * Set our internal state, used for display purposes, and for the emitted value when "Apply" is clicked.
+   * The `timePeriodsKey` param only applies to relative timeframes, not `v-calendar` selections;
+   * We return an empty string to keep the object shape consistent.
+   */
+  state.selectedRange = state.previouslySelectedRange = {
+    start,
+    end,
+    timePeriodsKey: '',
   }
 }
 
 /**
-     * Updates both the input field value, and the full time frame readout
-     * when a relative time frame button is clicked
-     * @param {*} timeframe
-     */
+ * Updates both the input field value, and the full time frame readout
+ * when a relative time frame button is clicked
+ * @param {*} timeframe
+ */
 const changeRelativeTimeframe = (timeframe: TimePeriod): void => {
   state.selectedTimeframe = state.previouslySelectedTimeframe = timeframe
 
@@ -380,74 +393,72 @@ const changeRelativeTimeframe = (timeframe: TimePeriod): void => {
   }
 
   state.fullRangeDisplay = formatDisplayDate(state.selectedRange, false)
+  submitDisabled.value = false
 }
 
 /**
-     * Clears any previously made choices, and emits the result of this action
-     * back to the parent.
-     */
+ * Clears any previously made choices, and emits the result of this action
+ * back to the parent.
+ */
 const clearSelection = (): void => {
-  selectedCalendarRange.value = ''
+  calendarRange.value = defaultTimeRange
+  calendarSingleDate.value = null
+
   state.abbreviatedDisplay = props.placeholder
   state.fullRangeDisplay = ''
-  state.selectedRange = { start: 0, end: 0, timePeriodsKey: '' }
 
+  // Set the relative timeframe to the smallest increment, eg: `15m`
   if (hasTimePeriods.value) {
     state.selectedTimeframe = props.timePeriods[0]?.values[0]
   }
 
-  // If a range, emit an object with empty `start`, `end`, `timePeriods`;
-  // Else, emit empty string for single date/time picker
-  if (props.range || props.mode === 'relative') {
-    emit('change', state.selectedRange)
-    emit('update:modelValue', state.selectedRange)
-  } else {
-    emit('change', '')
-    emit('update:modelValue', '')
-  }
+  state.selectedRange = state.previouslySelectedRange = defaultTimeRange
+
+  // Emit an object with empty `start`, `end`, `timePeriods`;
+  emit('change', state.selectedRange)
+  emit('update:modelValue', state.selectedRange)
 }
 
 /**
-     * Displays selected date/time/range as a human readable string.
-     * The date formatting string is dynamically determined based on
-     * the current mode of the instance (Custom vs Relative)
-     * @param {*} range A set of `start` and `end` Unix timestamps∂
-     */
+ * Displays selected date/time/range as a human readable string.
+ * The date formatting string is dynamically determined based on
+ * the current mode of the instance (Custom vs Relative)
+ * @param {*} range A set of `start` and `end` Unix timestamps∂
+ */
 const formatDisplayDate = (range: TimeRange, htmlFormat: boolean): string => {
   const { start, end } = range
   let fmtStr = 'PP hh:mm a'
-  const tzAbbrev = formatInTimeZone(start, localTz, '(z)')
+
+  const tzAbbrev = formatInTimeZone((start as Date), localTz, '(z)')
 
   // Determines the human timestamp readout format string; subject to change
   if (!hasCalendar.value && hasTimePeriods.value) {
     fmtStr = 'PP hh:mm a'
-  } else if (props.mode === 'date') {
+  } else if (ModeDateOnly.includes(props.mode)) {
     fmtStr = 'PP'
   }
-  // Determine whether to display a formatting time range, or a single value in input field
-  if (props.range) {
+
+  // Display a formatted time range
+  if (!isSingleDatepicker.value) {
     return htmlFormat
-      ? `<div>${format(start, fmtStr)} -&nbsp;</div><div>${formatInTimeZone(end, localTz, fmtStr)} ${tzAbbrev}</div>`
-      : `${format(start, fmtStr)} - ${formatInTimeZone(end, localTz, fmtStr)} ${tzAbbrev}`
-  } else if (start) {
-    return `${format(start, fmtStr)} ${tzAbbrev}`
+      ? `<div>${format(start as Date, fmtStr)} -&nbsp;</div><div>${formatInTimeZone(end as Date, localTz, fmtStr)} ${tzAbbrev}</div>`
+      : `${format(start as Date, fmtStr)} - ${formatInTimeZone(end as Date, localTz, fmtStr)} ${tzAbbrev}` || ''
   } else {
-    return ''
+    return `${format(start as Date, fmtStr)} ${tzAbbrev}`
   }
 }
 
 /**
-     * Once a selection is made, emit value back to parent.
-     * If a range date picker, send the full range (start and end); else, a single `start` Date.
-     */
+ * Once a selection is made, emit value back to parent.
+ * Emits `start`, `end` and the optional `timePeriodsKey`.
+ */
 const submitTimeFrame = async (): Promise<void> => {
-  if (props.range || hasTimePeriods.value) {
+  if (!isSingleDatepicker.value) {
     emit('change', state.selectedRange)
     emit('update:modelValue', state.selectedRange)
   } else {
-    const singleDate: Date = new Date(state.selectedRange.start)
-    emit('change', singleDate)
-    emit('update:modelValue', singleDate)
+    emit('change', { start: state.selectedRange.start, end: null })
+    emit('update:modelValue', { start: state.selectedRange.start, end: null })
   }
 
   state.hidePopover = true
@@ -455,17 +466,16 @@ const submitTimeFrame = async (): Promise<void> => {
 }
 
 /**
-     * Updates the input field value as a visual confirmation after a choice is made
-     *
-     * If a time range (custom or relative) determine which tab has focus,
-     * then update input field text.
-     * Else, update input field text for single date / time instance
-     */
+ * Updates the input field value as a visual confirmation after a choice is made
+ *
+ * If the calendar tab has focus, display the time range and timezone
+ * Otherwise, display the chosen relative timeframe
+ */
 const updateDisplay = (): void => {
-  if (props.range && hasTimePeriods.value && !showCalendar.value) {
-    state.abbreviatedDisplay = state.selectedTimeframe.display
-  } else {
+  if (showCalendar.value && !!state.selectedRange?.start) {
     state.abbreviatedDisplay = formatDisplayDate(state.selectedRange, true)
+  } else if (hasTimePeriods.value && !showCalendar.value) {
+    state.abbreviatedDisplay = state.selectedTimeframe.display
   }
 }
 
@@ -474,18 +484,26 @@ const ucWord = (val: string): string => {
 }
 
 /**
-     * Saves the internal state (range or single value) whenever
-     * the `v-calendar` instance is interacted with.
-     */
-watch(selectedCalendarRange, (newValue, oldValue) => {
+ * Triggers when `v-calendar` instance is in single date/time mode
+ */
+watch(calendarSingleDate, (newValue, oldValue) => {
+  if (newValue !== undefined && newValue !== oldValue) {
+    changeCalendarRange({ start: newValue, end: null, timePeriodsKey: '' } as TimeRange)
+  }
+}, { immediate: true })
+
+/**
+ * Triggers when `v-calendar` instance is in date range mode
+ */
+watch(calendarRange, (newValue, oldValue) => {
   if (newValue !== undefined && newValue !== oldValue) {
-    changeCalendarRange(newValue)
+    changeCalendarRange(newValue as TimeRange)
   }
 }, { immediate: true })
 
 /**
-     * Reinstate previous selection whenever user toggles between Relative and Custom tabs
-     */
+ * Reinstate previous selection whenever user toggles between Relative and Custom tabs
+ */
 watch(() => state.tabName, (newValue, oldValue) => {
   if (oldValue !== undefined && newValue === 'relative') {
     changeRelativeTimeframe(state.previouslySelectedTimeframe)
@@ -494,23 +512,29 @@ watch(() => state.tabName, (newValue, oldValue) => {
   }
 })
 
+/**
+ * Selects either "Relative" or "Custom" tab, saves the incoming default value to internal state,
+ * then updates the input field to display the human-readable time frame.
+ */
 onMounted(() => {
-  // Select the tab based on incoming defaults; save the default value to our internal
-  // state and update the input field to display the human-readable date/time.
-  if (props.modelValue) {
-    if ('timePeriodsKey' in (props.modelValue as TimeRange)) {
-      state.tabName = 'relative'
-      for (const section of props.timePeriods) {
-        const selectedTimeframe = section.values.find(e => e.key === (props.modelValue as TimeRange).timePeriodsKey)
-        if (selectedTimeframe) {
-          changeRelativeTimeframe(selectedTimeframe)
-          updateDisplay()
-          break
-        }
+  if (ModeArrayRelative.includes(props.mode) && props.modelValue?.timePeriodsKey) {
+    state.tabName = 'relative'
+    submitDisabled.value = false
+
+    for (const section of props.timePeriods) {
+      const selectedTimeframe = section.values.find(e => e.key === props.modelValue.timePeriodsKey)
+
+      if (selectedTimeframe) {
+        changeRelativeTimeframe(selectedTimeframe)
+        updateDisplay()
+        break
       }
-    } else {
-      state.tabName = 'custom'
-      changeCalendarRange(props.modelValue)
+    }
+  } else {
+    state.tabName = 'custom'
+    changeCalendarRange(props.modelValue)
+
+    if ((props.modelValue?.start && props.modelValue?.end) || (isSingleDatepicker.value && props.modelValue?.start)) {
       updateDisplay()
     }
   }
@@ -543,10 +567,6 @@ $grid-spacing: var(--kui-space-30, $kui-space-30);
     // Styling button as input via mixin
     @include input-default;
 
-    .calendar-icon {
-      margin-right: var(--kui-space-20, $kui-space-20) !important;
-    }
-
     &.set-min-width {
       min-width: $timepicker-min-width;
     }
@@ -628,7 +648,7 @@ $grid-spacing: var(--kui-space-30, $kui-space-30);
             font-size: var(--kui-font-size-30, $kui-font-size-30);
             font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
             justify-content: center;
-            padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
+            padding: var(--kui-space-40, $kui-space-40) var(--kui-space-50, $kui-space-50);
 
             &.selected-option {
               background-color: var(--kui-color-background-primary, $kui-color-background-primary);
diff --git a/src/types/date-time-picker.ts b/src/types/date-time-picker.ts
index 96bbd906e9..eb7a7fe818 100644
--- a/src/types/date-time-picker.ts
+++ b/src/types/date-time-picker.ts
@@ -1,8 +1,26 @@
 import type { AnyElementOf } from '@/types/utils'
 
+// v-calendar defines these types internally, but does not export them
+export interface SimpleDateParts {
+  year: number
+  month: number
+  day: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+export type DateSource = Date | string | number
+export type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
+export type DatePickerRangeObject = {
+  start: Exclude<DatePickerDate, null>
+  end: Exclude<DatePickerDate, null>
+}
+export type DatePickerModel = DatePickerDate | DatePickerRangeObject
+
 export interface TimeRange {
-  start: Date | number,
-  end: Date | number,
+  start: Date | null
+  end: Date | null
   timePeriodsKey?: string
 }
 
@@ -25,7 +43,7 @@ export interface DateTimePickerState {
   fullRangeDisplay?: string
   hidePopover: boolean
   selectedRange: TimeRange
-  previouslySelectedRange: TimeRange,
+  previouslySelectedRange: TimeRange
   selectedTimeframe: TimePeriod
   previouslySelectedTimeframe: TimePeriod
   tabName: string
@@ -35,5 +53,32 @@ export interface CSSProperties {
   [key: string]: string
 }
 
-export const ModeArray = ['date', 'time', 'dateTime', 'relative', 'relativeDate', 'relativeDateTime']
+export enum TimepickerMode {
+  Date = 'date',
+  Time = 'time',
+  Datetime = 'dateTime',
+  Relative = 'relative',
+  RelativeDate = 'relativeDate',
+  RelativeDateTime = 'relativeDateTime',
+}
+
+export const ModeArray: string[] = Object.values(TimepickerMode)
+
+export const ModeArrayCustom: string[] = [
+  TimepickerMode.Date,
+  TimepickerMode.Time,
+  TimepickerMode.Datetime,
+]
+
+export const ModeArrayRelative: string[] = [
+  TimepickerMode.Relative,
+  TimepickerMode.RelativeDate,
+  TimepickerMode.RelativeDateTime,
+]
+
+export const ModeDateOnly: string[] = [
+  TimepickerMode.Date,
+  TimepickerMode.RelativeDate,
+]
+
 export type Mode = AnyElementOf<typeof ModeArray>
diff --git a/yarn.lock b/yarn.lock
index a4aa707554..e3d42cf543 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3065,11 +3065,6 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-date-fns-tz@^1.0.12:
-  version "1.3.8"
-  resolved "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz#083e3a4e1f19b7857fa0c18deea6c2bc46ded7b9"
-  integrity sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==
-
 date-fns-tz@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-2.0.0.tgz#1b14c386cb8bc16fc56fe333d4fc34ae1d1099d5"
@@ -8584,15 +8579,15 @@ uuid@^9.0.1:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
   integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
 
-v-calendar@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/v-calendar/-/v-calendar-3.0.3.tgz#f04c625d3c3352d5685099bb4ad3e24d0530a7d4"
-  integrity sha512-Skpp/nMoFqFadm94aWj0oOfazoux5T5Ug3/pbRbdolkoDrnVcL7Ronw1/SGFRUPGOwnLdYwhKPhrhSE1segW6w==
+v-calendar@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz#fb47320a5469973454f030d850134eebcd2307eb"
+  integrity sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==
   dependencies:
     "@types/lodash" "^4.14.165"
     "@types/resize-observer-browser" "^0.1.7"
     date-fns "^2.16.1"
-    date-fns-tz "^1.0.12"
+    date-fns-tz "^2.0.0"
     lodash "^4.17.20"
     vue-screen-utils "^1.0.0-beta.13"