@onereach/ui-components 7.0.2-beta.3545.0 → 7.0.2-beta.3549.0

package/dist/esm/v3/components/or-time-range-picker-v3/OrTimeRangePicker.vue.d.ts

@@ -1,5 +1,4 @@
 import { PropType } from 'vue-demi';
-import { FilterFunction } from '../or-date-time-picker-v3';
 import { TimeRangePickerFormat, TimeRangePickerSize } from './props';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
@@ -50,7 +49,193 @@ declare const _default: import("vue-demi").DefineComponent<{
     popoverState: import("vue-demi").ComputedRef<any>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     popoverStyles: import("vue-demi").ComputedRef<string[]>;
-    initialValue: Date;
+    initialValue: import("vue-demi").Ref<{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    } | [{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }, {
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[Date, Date] | undefined>;
     draftModelValue: import("vue-demi").Ref<[{
         toString: () => string;
@@ -304,8 +489,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         };
     } | undefined>;
     selectedControl: import("vue-demi").Ref<"from" | "to">;
-    filterFrom: FilterFunction;
-    filterTo: FilterFunction;
     isInvalidDraftModelValue: import("vue-demi").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;

package/dist/esm/v3/components/or-time-range-picker-v3/index.js

@@ -1,6 +1,6 @@
-export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-463c2d37.js';
-import '../../OrDateTimePicker-d29875b4.js';
-import '../../OrDateTimePickerTimeSelect-7d18eee6.js';
+export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-8ebe2a0b.js';
+import '../../OrDateTimePicker-46bcebab.js';
+import '../../OrDateTimePickerTimeSelect-d9330bf4.js';
 export { D as TimeRangePickerFormat } from '../../getTimePlaceholder-f190a43f.js';
 export { I as TimeRangePickerSize } from '../../OrInputBox-5f246763.js';
 import 'vue-demi';

package/dist/esm/v3/index.js

@@ -33,13 +33,13 @@ export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-2a0fbf0d.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-c0ff35b6.js';
 export { s as OrMenuV3 } from './OrMenu-72844eb1.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-3b07d49e.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-38e74ea4.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-b5c8c947.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-afa19ccd.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-1d36bcb1.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-887b4b9d.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-d1eccf52.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-1a5011b3.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-55b31a45.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-d29875b4.js';
-export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-7d18eee6.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-46bcebab.js';
+export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-d9330bf4.js';
 export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-f190a43f.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
@@ -123,9 +123,9 @@ export { s as OrTextV3 } from './OrText-d54c951d.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
 export { s as OrTextareaV3 } from './OrTextarea-68d6803e.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-cb6762c8.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-cf35388e.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-2e321cf1.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-463c2d37.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-db9bab3f.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-e7daa0fb.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-8ebe2a0b.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-d6f117e2.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-e88f53a2.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "7.0.2-beta.3545.0",
+  "version": "7.0.2-beta.3549.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -39,7 +39,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^5.0.1-beta.3545.0",
+    "@onereach/styles": "^5.0.1-beta.3549.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -277,14 +277,16 @@ export default defineComponent({
         if (props.dateFilter && !props.dateFilter(draftModelValue.value)) {
           return true;
         }
+
+        return false;
       }
 
-      return false;
+      return true;
     });
 
     // Methods
     function apply(): void {
-      proxyModelValue.value = draftModelValue.value ?? initialValue.value;
+      proxyModelValue.value = draftModelValue.value;
     }
 
     function reset(): void {

package/src/components/or-date-range-picker-v3/OrDateRangePicker.vue

@@ -81,14 +81,11 @@
             <div :class="['layout-column', 'grow']">
               <OrDateTimePickerMonthSelect
                 v-model="initialValueFrom"
-                :year-filter="filterFrom"
-                :month-filter="filterFrom"
               />
 
               <OrDateTimePickerDateSelect
                 v-model="genericDraftModelValue"
                 :initial-value="initialValueFrom"
-                :date-filter="genericFilter"
                 :range-start="draftModelValueFrom || initialValueFrom"
                 :range-end="draftModelValueTo || initialValueTo"
                 @update:model-value="switchSelectedControl()"
@@ -100,14 +97,11 @@
             <div :class="['layout-column', 'grow']">
               <OrDateTimePickerMonthSelect
                 v-model="initialValueTo"
-                :year-filter="filterTo"
-                :month-filter="filterTo"
               />
 
               <OrDateTimePickerDateSelect
                 v-model="genericDraftModelValue"
                 :initial-value="initialValueTo"
-                :date-filter="genericFilter"
                 :range-start="draftModelValueFrom || initialValueFrom"
                 :range-end="draftModelValueTo || initialValueTo"
                 @update:model-value="switchSelectedControl()"
@@ -164,7 +158,7 @@
 import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useProxyModelValue, useResponsive } from '../../hooks';
-import { FilterFunction, getCurrentDate, getNextMonthDate, OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader } from '../or-date-time-picker-v3';
+import { getCurrentDate, getNextMonthDate, OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader } from '../or-date-time-picker-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -301,6 +295,12 @@ export default defineComponent({
       draftModelValue.value = value ?? [undefined, undefined];
     });
 
+    watch(draftModelValue, (value) => {
+      if (value[0] && value[1]) {
+        draftModelValue.value = Number(value[0]) > Number(value[1]) ? [value[1], value[0]] : value;
+      }
+    });
+
     const draftModelValueFrom = computed({
       get: () => draftModelValue.value[0],
 
@@ -339,36 +339,12 @@ export default defineComponent({
 
     const selectedControl = ref<'from' | 'to'>('from');
 
-    const filterFrom: FilterFunction = (value) => {
-      if (draftModelValueTo.value) {
-        return Number(value) <= Number(draftModelValueTo.value);
-      }
-
-      return true;
-    };
-
-    const filterTo: FilterFunction = (value) => {
-      if (draftModelValueFrom.value) {
-        return Number(value) >= Number(draftModelValueFrom.value);
-      }
-
-      return true;
-    };
-
-    const genericFilter: FilterFunction = (value) => {
-      return selectedControl.value === 'from' ? filterFrom(value) : filterTo(value);
-    };
-
     const isInvalidDraftModelValue = computed(() => {
-      if (draftModelValueFrom.value) {
-        return !filterFrom(draftModelValueFrom.value);
-      }
-
-      if (draftModelValueTo.value) {
-        return !filterTo(draftModelValueTo.value);
+      if (draftModelValueFrom.value && draftModelValueTo.value) {
+        return false;
       }
 
-      return false;
+      return true;
     });
 
     // Methods
@@ -377,10 +353,7 @@ export default defineComponent({
     }
 
     function apply(): void {
-      proxyModelValue.value = [
-        draftModelValue.value[0] ?? initialValueFrom.value,
-        draftModelValue.value[1] ?? initialValueTo.value,
-      ];
+      proxyModelValue.value = draftModelValue.value as [Date, Date];
     }
 
     function reset(): void {
@@ -433,9 +406,6 @@ export default defineComponent({
       draftModelValueTo,
       genericDraftModelValue,
       selectedControl,
-      filterFrom,
-      filterTo,
-      genericFilter,
       isInvalidDraftModelValue,
       switchSelectedControl,
       apply,

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -356,14 +356,16 @@ export default defineComponent({
         if (props.minutesFilter && !props.minutesFilter(draftModelValue.value)) {
           return true;
         }
+
+        return false;
       }
 
-      return false;
+      return true;
     });
 
     // Methods
     function apply(): void {
-      proxyModelValue.value = draftModelValue.value ?? initialValue.value;
+      proxyModelValue.value = draftModelValue.value;
     }
 
     function reset(): void {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -145,28 +145,28 @@ export default defineComponent({
       return props.format;
     });
 
-    const hoursRange = ref<'am' | 'pm'>(props.initialValue.getUTCHours() < 12 ? 'am' : 'pm');
+    const hoursRange = ref<'am' | 'pm'>((proxyModelValue.value ?? props.initialValue).getUTCHours() < 12 ? 'am' : 'pm');
 
     watch(hoursRange, (value) => {
       switch (value) {
         case 'am':
           proxyModelValue.value = new Date(Date.UTC(
-            props.initialValue.getUTCFullYear(),
-            props.initialValue.getUTCMonth(),
-            props.initialValue.getUTCDate(),
-            props.initialValue.getUTCHours() - 12,
-            props.initialValue.getUTCMinutes(),
+            (proxyModelValue.value ?? props.initialValue).getUTCFullYear(),
+            (proxyModelValue.value ?? props.initialValue).getUTCMonth(),
+            (proxyModelValue.value ?? props.initialValue).getUTCDate(),
+            (proxyModelValue.value ?? props.initialValue).getUTCHours() - 12,
+            (proxyModelValue.value ?? props.initialValue).getUTCMinutes(),
           ));
 
           break;
 
         case 'pm':
           proxyModelValue.value = new Date(Date.UTC(
-            props.initialValue.getUTCFullYear(),
-            props.initialValue.getUTCMonth(),
-            props.initialValue.getUTCDate(),
-            props.initialValue.getUTCHours() + 12,
-            props.initialValue.getUTCMinutes(),
+            (proxyModelValue.value ?? props.initialValue).getUTCFullYear(),
+            (proxyModelValue.value ?? props.initialValue).getUTCMonth(),
+            (proxyModelValue.value ?? props.initialValue).getUTCDate(),
+            (proxyModelValue.value ?? props.initialValue).getUTCHours() + 12,
+            (proxyModelValue.value ?? props.initialValue).getUTCMinutes(),
           ));
 
           break;
@@ -178,11 +178,11 @@ export default defineComponent({
         const value = index;
 
         return new Date(Date.UTC(
-          props.initialValue.getUTCFullYear(),
-          props.initialValue.getUTCMonth(),
-          props.initialValue.getUTCDate(),
+          (proxyModelValue.value ?? props.initialValue).getUTCFullYear(),
+          (proxyModelValue.value ?? props.initialValue).getUTCMonth(),
+          (proxyModelValue.value ?? props.initialValue).getUTCDate(),
           value,
-          props.initialValue.getUTCMinutes(),
+          (proxyModelValue.value ?? props.initialValue).getUTCMinutes(),
         ));
       }).filter((value) => {
         if (proxyTimeFormat.value === DateTimePickerTimeFormat.H23) {
@@ -204,10 +204,10 @@ export default defineComponent({
         const value = index;
 
         return new Date(Date.UTC(
-          props.initialValue.getUTCFullYear(),
-          props.initialValue.getUTCMonth(),
-          props.initialValue.getUTCDate(),
-          props.initialValue.getUTCHours(),
+          (proxyModelValue.value ?? props.initialValue).getUTCFullYear(),
+          (proxyModelValue.value ?? props.initialValue).getUTCMonth(),
+          (proxyModelValue.value ?? props.initialValue).getUTCDate(),
+          (proxyModelValue.value ?? props.initialValue).getUTCHours(),
           value,
         ));
       });

package/src/components/or-time-picker-v3/OrTimePicker.vue

@@ -269,14 +269,16 @@ export default defineComponent({
         if (props.minutesFilter && !props.minutesFilter(draftModelValue.value)) {
           return true;
         }
+
+        return false;
       }
 
-      return false;
+      return true;
     });
 
     // Methods
     function apply(): void {
-      proxyModelValue.value = draftModelValue.value ?? initialValue.value;
+      proxyModelValue.value = draftModelValue.value;
     }
 
     function reset(): void {

package/src/components/or-time-range-picker-v3/OrTimeRangePicker.vue

@@ -85,8 +85,6 @@
               :class="['grow']"
               :initial-value="initialValue"
               :format="format"
-              :hours-filter="filterFrom"
-              :minutes-filter="filterFrom"
             />
           </template>
 
@@ -96,8 +94,6 @@
               :class="['grow']"
               :initial-value="initialValue"
               :format="format"
-              :hours-filter="filterTo"
-              :minutes-filter="filterTo"
             />
           </template>
         </div>
@@ -150,7 +146,7 @@
 import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useProxyModelValue, useResponsive } from '../../hooks';
-import { FilterFunction, getCurrentDate, OrDateTimePickerMobileControl, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from '../or-date-time-picker-v3';
+import { getCurrentDate, OrDateTimePickerMobileControl, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from '../or-date-time-picker-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -276,7 +272,11 @@ export default defineComponent({
     ]);
 
     // State
-    const initialValue = getCurrentDate();
+    const initialValue = ref(props.modelValue ?? getCurrentDate());
+
+    watch(() => props.modelValue, (value) => {
+      initialValue.value = value ?? getCurrentDate();
+    });
 
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref<[Date | undefined, Date | undefined]>(proxyModelValue.value ?? [undefined, undefined]);
@@ -309,40 +309,17 @@ export default defineComponent({
 
     const selectedControl = ref<'from' | 'to'>('from');
 
-    const filterFrom: FilterFunction = (value) => {
-      if (draftModelValueTo.value) {
-        return Number(value) <= Number(draftModelValueTo.value);
-      }
-
-      return true;
-    };
-
-    const filterTo: FilterFunction = (value) => {
-      if (draftModelValueFrom.value) {
-        return Number(value) >= Number(draftModelValueFrom.value);
-      }
-
-      return true;
-    };
-
     const isInvalidDraftModelValue = computed(() => {
-      if (draftModelValueFrom.value) {
-        return !filterFrom(draftModelValueFrom.value);
+      if (draftModelValueFrom.value && draftModelValueTo.value && draftModelValueFrom.value < draftModelValueTo.value) {
+        return false;
       }
 
-      if (draftModelValueTo.value) {
-        return !filterTo(draftModelValueTo.value);
-      }
-
-      return false;
+      return true;
     });
 
     // Methods
     function apply(): void {
-      proxyModelValue.value = [
-        draftModelValue.value[0] ?? initialValue,
-        draftModelValue.value[1] ?? initialValue,
-      ];
+      proxyModelValue.value = draftModelValue.value as [Date, Date];
     }
 
     function reset(): void {
@@ -394,8 +371,6 @@ export default defineComponent({
       draftModelValueFrom,
       draftModelValueTo,
       selectedControl,
-      filterFrom,
-      filterTo,
       isInvalidDraftModelValue,
       apply,
       reset,