@onereach/ui-components 10.0.2 → 10.1.0-beta.4242.0

package/dist/bundled/v2/components/OrTimeFormatV3/OrTimeFormat.js

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, inject } from 'vue-demi';
 import { TimeFormat } from './styles.js';
-import { DateTimePickerTimeFormat } from '../OrDateTimePickerV3/props.js';
+import { TimeFormat as TimeFormat$1, Locale } from '../OrDateTimePickerV3/tokens.js';
+import { a as DateTimePickerTimeFormat } from '../../types-6a847182.js';
 import { formatTime } from '../OrDateTimePickerV3/utils/formatTime.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
@@ -12,12 +13,16 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      default: undefined
+    },
+    locale: {
+      type: String,
+      default: undefined
     },
     placeholder: {
       type: String,
@@ -25,14 +30,24 @@ var script = defineComponent({
     }
   },
   expose: ['root'],
-  setup() {
-    // Refs
+  setup(props) {
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-time-format-v3', ...TimeFormat]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(TimeFormat$1, DateTimePickerTimeFormat.Auto);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     return {
       root,
       rootStyles,
+      resolvedFormat,
+      resolvedLocale,
       formatTime
     };
   }
@@ -49,7 +64,7 @@ var __vue_render__ = function () {
   return _c('div', {
     ref: 'root',
     class: _vm.rootStyles
-  }, [_vm._v("\n  " + _vm._s(_vm.modelValue ? _vm.formatTime(_vm.modelValue, _vm.format) : _vm.placeholder) + "\n")]);
+  }, [_vm.modelValue ? [_vm._v("\n    " + _vm._s(_vm.formatTime(_vm.modelValue, _vm.resolvedFormat, _vm.resolvedLocale)) + "\n  ")] : [_vm._v("\n    " + _vm._s(_vm.placeholder) + "\n  ")]], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrTimeFormatV3/OrTimeFormat.vue.d.ts

@@ -1,17 +1,23 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerTimeFormat, formatTime } from '../or-date-time-picker-v3';
+import { DateTimePickerModelValue, formatTime } from '../or-date-time-picker-v3';
 declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"auto" | "h12" | "h23">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     formatTime: typeof formatTime;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
         default: undefined;
     };
     format: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat.Auto;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
@@ -19,32 +25,41 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
         default: undefined;
     };
     format: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat.Auto;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
         default: undefined;
     };
 }>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
     format: "auto" | "h12" | "h23";
+    locale: string;
     placeholder: string;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"auto" | "h12" | "h23">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     formatTime: typeof formatTime;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
     format: "auto" | "h12" | "h23";
+    locale: string;
     placeholder: string;
 } & {}, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
     format: "auto" | "h12" | "h23";
+    locale: string;
     placeholder: string;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrTimePickerV3/OrTimePicker.js

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { TimePicker, TimePickerPopover } from './styles.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-328896c3.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-bcdf865d.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrIconV3/OrIcon.js';
@@ -8,11 +8,12 @@ import __vue_component__$4 from '../OrIconButtonV3/OrIconButton.js';
 import __vue_component__$5 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a0ea3524.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-31d1e247.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
-import { DateTimePickerTimeFormat } from '../OrDateTimePickerV3/props.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
+import { TimeFormat, Locale } from '../OrDateTimePickerV3/tokens.js';
+import { a as DateTimePickerTimeFormat } from '../../types-6a847182.js';
 import { getCurrentDate } from '../OrDateTimePickerV3/utils/getCurrentDate.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -43,12 +44,16 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      default: undefined
+    },
+    locale: {
+      type: String,
+      default: undefined
     },
     hoursFilter: {
       type: Function,
@@ -95,8 +100,9 @@ var script = defineComponent({
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-time-picker-v3', ...TimePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -107,9 +113,16 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-time-picker-v3', ...TimePicker]);
     const popoverStyles = computed(() => ['or-time-picker-popover-v3', ...TimePickerPopover]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     // State
     const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
     watch(() => props.modelValue, value => {
@@ -155,7 +168,7 @@ var script = defineComponent({
     }
     function formatTimeAlt(value) {
       var _a;
-      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(resolvedLocale.value, {
         timeStyle: 'short',
         hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'
@@ -163,12 +176,14 @@ var script = defineComponent({
     }
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+      resolvedFormat,
+      resolvedLocale,
       initialValue,
       proxyModelValue,
       draftModelValue,
@@ -266,7 +281,8 @@ var __vue_render__ = function () {
     }],
     class: ['!border-0'],
     attrs: {
-      "format": _vm.format,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "selected": _vm.popover && _vm.popover.state === 'open',
       "required": _vm.required,
       "readonly": _vm.readonly,
@@ -304,7 +320,8 @@ var __vue_render__ = function () {
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     attrs: {
       "initial-value": _vm.initialValue,
-      "format": _vm.format,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "hours-filter": _vm.hoursFilter,
       "minutes-filter": _vm.minutesFilter
     },

package/dist/bundled/v2/components/OrTimePickerV3/OrTimePicker.vue.d.ts

@@ -1,8 +1,9 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerTimeFormat, FilterFunction } from '../or-date-time-picker-v3';
+import { DateTimePickerFilterFunction, DateTimePickerModelValue } from '../or-date-time-picker-v3';
 import { InputBoxSize } from '../or-input-box-v3';
 declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -15,32 +16,37 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         [x: number]: string;
     } | {}, true> | undefined>;
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"auto" | "h12" | "h23">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     initialValue: import("@vue/composition-api").Ref<Date>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<Date>;
-    draftModelValue: import("@vue/composition-api").Ref<Date>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateTimePickerModelValue>;
+    draftModelValue: import("@vue/composition-api").Ref<DateTimePickerModelValue>;
     isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     openPopover: () => void;
     closePopover: () => void;
-    formatTimeAlt: (value?: Date) => string;
+    formatTimeAlt: (value: DateTimePickerModelValue) => string;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
         default: undefined;
     };
     format: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat.Auto;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     hoursFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     minutesFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     size: {
@@ -77,19 +83,23 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
         default: undefined;
     };
     format: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat.Auto;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     hoursFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     minutesFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     size: {
@@ -125,10 +135,11 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         default: boolean;
     };
 }>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
     format: "auto" | "h12" | "h23";
-    hoursFilter: FilterFunction;
-    minutesFilter: FilterFunction;
+    locale: string;
+    hoursFilter: DateTimePickerFilterFunction;
+    minutesFilter: DateTimePickerFilterFunction;
     size: "m" | "s";
     label: string;
     hint: string;
@@ -141,6 +152,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -153,22 +165,24 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         [x: number]: string;
     } | {}, true> | undefined>;
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"auto" | "h12" | "h23">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     initialValue: import("@vue/composition-api").Ref<Date>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<Date>;
-    draftModelValue: import("@vue/composition-api").Ref<Date>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateTimePickerModelValue>;
+    draftModelValue: import("@vue/composition-api").Ref<DateTimePickerModelValue>;
     isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     openPopover: () => void;
     closePopover: () => void;
-    formatTimeAlt: (value?: Date) => string;
+    formatTimeAlt: (value: DateTimePickerModelValue) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
     format: "auto" | "h12" | "h23";
-    hoursFilter: FilterFunction;
-    minutesFilter: FilterFunction;
+    locale: string;
+    hoursFilter: DateTimePickerFilterFunction;
+    minutesFilter: DateTimePickerFilterFunction;
     size: "m" | "s";
     label: string;
     hint: string;
@@ -180,10 +194,11 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
     format: "auto" | "h12" | "h23";
-    hoursFilter: FilterFunction;
-    minutesFilter: FilterFunction;
+    locale: string;
+    hoursFilter: DateTimePickerFilterFunction;
+    minutesFilter: DateTimePickerFilterFunction;
     size: "m" | "s";
     label: string;
     hint: string;

package/dist/bundled/v2/components/OrTimeRangePickerV3/OrTimeRangePicker.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { TimeRangePicker, TimeRangePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -7,12 +7,13 @@ import __vue_component__$4 from '../OrIconButtonV3/OrIconButton.js';
 import __vue_component__$5 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a0ea3524.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-328896c3.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-31d1e247.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-bcdf865d.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
-import { DateTimePickerTimeFormat } from '../OrDateTimePickerV3/props.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
+import { TimeFormat, Locale } from '../OrDateTimePickerV3/tokens.js';
+import { a as DateTimePickerTimeFormat } from '../../types-6a847182.js';
 import { getCurrentDate } from '../OrDateTimePickerV3/utils/getCurrentDate.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
@@ -44,12 +45,16 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Object,
+      type: undefined,
       default: undefined
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      default: undefined
+    },
+    locale: {
+      type: String,
+      default: undefined
     },
     size: {
       type: String,
@@ -87,9 +92,10 @@ var script = defineComponent({
   emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
-    var _a, _b;
-    // Refs
+    var _a, _b, _c, _d, _e;
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-time-range-picker-v3', ...TimeRangePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -100,16 +106,26 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-time-range-picker-v3', ...TimeRangePicker]);
     const popoverStyles = computed(() => ['or-time-range-picker-popover-v3', ...TimeRangePickerPopover]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     // State
-    const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : [getCurrentDate(), getCurrentDate()]);
+    const initialValueFrom = ref((_b = (_a = props.modelValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : getCurrentDate());
+    const initialValueTo = ref((_d = (_c = props.modelValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : getCurrentDate());
     watch(() => props.modelValue, value => {
-      initialValue.value = value !== null && value !== void 0 ? value : [getCurrentDate(), getCurrentDate()];
+      var _a, _b;
+      initialValueFrom.value = (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : getCurrentDate();
+      initialValueTo.value = (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : getCurrentDate();
     });
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref((_b = proxyModelValue.value) !== null && _b !== void 0 ? _b : [undefined, undefined]);
+    const draftModelValue = ref((_e = proxyModelValue.value) !== null && _e !== void 0 ? _e : [undefined, undefined]);
     watch(proxyModelValue, value => {
       draftModelValue.value = value !== null && value !== void 0 ? value : [undefined, undefined];
     });
@@ -157,7 +173,7 @@ var script = defineComponent({
     }
     function formatTimeAlt(value) {
       var _a;
-      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(resolvedLocale.value, {
         timeStyle: 'short',
         hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'
@@ -170,13 +186,16 @@ var script = defineComponent({
     } = useResponsive();
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
-      initialValue,
+      resolvedFormat,
+      resolvedLocale,
+      initialValueFrom,
+      initialValueTo,
       proxyModelValue,
       draftModelValue,
       draftModelValueFrom,
@@ -282,7 +301,8 @@ var __vue_render__ = function () {
     }],
     class: ['!border-0'],
     attrs: {
-      "format": _vm.format,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "selected": _vm.popover && _vm.popover.state === 'open' && _vm.selectedControl === 'from',
       "required": _vm.required,
       "readonly": _vm.readonly,
@@ -311,7 +331,8 @@ var __vue_render__ = function () {
     }],
     class: ['!border-0'],
     attrs: {
-      "format": _vm.format,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "selected": _vm.popover && _vm.popover.state === 'open' && _vm.selectedControl === 'to',
       "required": _vm.required,
       "readonly": _vm.readonly,
@@ -366,8 +387,9 @@ var __vue_render__ = function () {
   }, [_vm.isDesktop || _vm.isMobile && _vm.selectedControl === 'from' ? [_c('OrDateTimePickerTimeSelect', {
     class: ['grow'],
     attrs: {
-      "initial-value": _vm.initialValue[0],
-      "format": _vm.format
+      "initial-value": _vm.initialValueFrom,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale
     },
     model: {
       value: _vm.draftModelValueFrom,
@@ -379,8 +401,9 @@ var __vue_render__ = function () {
   })] : _vm._e(), _vm._v(" "), _vm.isDesktop || _vm.isMobile && _vm.selectedControl === 'to' ? [_c('OrDateTimePickerTimeSelect', {
     class: ['grow'],
     attrs: {
-      "initial-value": _vm.initialValue[1],
-      "format": _vm.format
+      "initial-value": _vm.initialValueTo,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale
     },
     model: {
       value: _vm.draftModelValueTo,