vueless 0.0.164 → 0.0.165

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.164",
+  "version": "0.0.165",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-calendar/components/DayView.vue

@@ -62,7 +62,7 @@ const props = defineProps({
 
   dateFormat: {
     type: String,
-    required: true,
+    default: undefined,
   },
 
   range: {

package/ui.form-calendar/configs/default.config.js

@@ -138,10 +138,10 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaultVariants: {
-    dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     range: false,
     timepicker: false,
+    dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-calendar/index.stories.js

@@ -9,9 +9,7 @@ export default {
   id: "3165",
   title: "Form Inputs & Controls / Calendar",
   component: UCalendar,
-  args: {
-    label: "Label",
-  },
+  args: {},
   argTypes: {
     ...getArgTypes(UCalendar.name),
   },
@@ -31,32 +29,45 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots };
   },
+  data() {
+    return {
+      value: this.args.value,
+    };
+  },
   template: `
-      <UCalendar v-bind="args" v-model="args.value">
+      <UCalendar v-bind="args" v-model="value">
         <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
           <template v-if="args[slot]">{{ args[slot] }}</template>
         </template>
       </UCalendar>
+
+      <div class="mt-4">
+        {{ value }}
+      </div>
     `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { value: new Date() };
 
 export const Range = DefaultTemplate.bind({});
 Range.args = {
   range: true,
   value: {
-    from: 1651813634,
-    to: 1654492034,
+    from: new Date(2022, 2),
+    to: new Date(2024, 2, 14, 12, 24, 14),
   },
 };
 
 export const Timepicker = DefaultTemplate.bind({});
-Timepicker.args = { value: 1645653600, timepicker: true };
+Timepicker.args = { value: new Date(2024, 2, 14, 12, 24, 14), timepicker: true };
 
 export const MinMax = DefaultTemplate.bind({});
-MinMax.args = { minDate: "2022-02-22", maxDate: "2022-02-26", value: 1645653600 };
+MinMax.args = {
+  minDate: "2022-02-22",
+  maxDate: new Date(2022, 2, 26),
+  value: new Date(2022, 2, 24),
+};
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: 1645653600 };
+DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: "28.06.2024" };

package/ui.form-calendar/index.vue

@@ -167,7 +167,6 @@ import {
 } from "./services/calendar.service";
 
 import {
-  getUnixTimestampFromDate,
   getDateWithoutTime,
   addMonths,
   addDays,
@@ -202,10 +201,10 @@ defineOptions({ name: "UCalendar" });
 
 const props = defineProps({
   /**
-   * Calendar value (timestamp).
+   * Calendar value in JS Date Object or String formatted in provided props.dateFormat.
    */
   modelValue: {
-    type: [Number, Object],
+    type: [String, Object],
     default: null,
   },
 
@@ -251,7 +250,7 @@ const props = defineProps({
   },
 
   /**
-   * Min date in format date string or Date.
+   * Min date in JS Date Object or Date String formatted in provided props.dateFormat.
    */
   minDate: {
     type: [Date, String],
@@ -259,7 +258,7 @@ const props = defineProps({
   },
 
   /**
-   * Max date in format date string or Date.
+   * Max date in JS Date Object or Date String formatted in provided props.dateFormat.
    */
   maxDate: {
     type: [Date, String],
@@ -402,7 +401,7 @@ const isTimepickerEnabled = computed(() => {
 const isModelRangeType = computed(() => {
   return (
     props.modelValue !== null &&
-    !isNumeric(props.modelValue) &&
+    !(props.modelValue instanceof Date) &&
     typeof props.modelValue === "object"
   );
 });
@@ -414,10 +413,15 @@ const localValue = computed({
 
       const to = isModelRangeType.value ? props.modelValue.to : null;
 
-      return { from, to };
+      return {
+        from: parseDate(from || null, props.dateFormat, locale.value),
+        to: parseDate(to || null, props.dateFormat, locale.value),
+      };
     }
 
-    return isModelRangeType.value ? props.modelValue.from : props.modelValue;
+    return isModelRangeType.value
+      ? parseDate(props.modelValue.from || null, props.dateFormat, locale.value)
+      : parseDate(props.modelValue || null, props.dateFormat, locale.value);
   },
   set(value) {
     value = getCurrentValueType(value);
@@ -433,9 +437,6 @@ const localValue = computed({
       parsedDate.setMinutes(Number(minutesRef.value.value));
     }
 
-    const timestamp = parsedDate ? getUnixTimestampFromDate(parsedDate) : null;
-    const timestampTo = parsedDateTo ? getUnixTimestampFromDate(parsedDateTo) : null;
-
     const isOutOfRange = dateIsOutOfRange(
       parsedDate || new Date(),
       props.minDate,
@@ -448,7 +449,15 @@ const localValue = computed({
       return;
     }
 
-    emit("update:modelValue", props.range ? { from: timestamp, to: timestampTo } : timestamp);
+    const newDate = props.dateFormat
+      ? formatDate(parsedDate || null, props.dateFormat, locale.value)
+      : parsedDate;
+
+    const newDateTo = props.dateFormat
+      ? formatDate(parsedDateTo || null, props.dateFormat, locale.value)
+      : parsedDateTo;
+
+    emit("update:modelValue", props.range ? { from: newDate, to: newDateTo } : newDate);
 
     if (parsedDate === null && isTimepickerEnabled.value) {
       const currentDate = new Date();
@@ -568,9 +577,7 @@ function onInputDate(newDate) {
 
   if (props.range) {
     const isFullReset =
-      localValue.value.to ||
-      !localValue.value.from ||
-      getUnixTimestampFromDate(date) <= localValue.value.from;
+      localValue.value.to || !localValue.value.from || date <= localValue.value.from;
 
     localValue.value = isFullReset
       ? { from: date, to: null }

package/ui.form-calendar/services/calendar.service.js

@@ -15,7 +15,7 @@ export function getInitialActiveDate(localValue) {
   return new Date();
 }
 
-export function formatDate(dateObj, format, locale) {
+export function formatDate(dateObj, format = "Y-m-d H:i:S", locale) {
   if (dateObj === null) {
     return "";
   }
@@ -85,7 +85,7 @@ export function parseDate(date, format = "Y-m-d H:i:S", locale) {
   return parsedDate;
 }
 
-export function parseStringDate(dateString, format, localeTokenRegex, locale) {
+export function parseStringDate(dateString, format = "Y-m-d H:i:S", localeTokenRegex, locale) {
   const isWithinTimezone = /Z$/.test(dateString) || /GMT$/.test(dateString);
 
   if (isWithinTimezone) {
@@ -163,18 +163,16 @@ export function dateIsOutOfRange(date, min, max, locale, dateFormat = null) {
 
   const maxDate = typeof max === "string" ? parseDate(max, dateFormat, locale) : max;
 
-  const time = date.getTime();
-
   if (minDate && maxDate) {
-    return time < minDate.getTime() || time > maxDate.getTime();
+    return date < minDate || date > maxDate;
   }
 
   if (minDate) {
-    return time < minDate.getTime();
+    return date < minDate;
   }
 
   if (maxDate) {
-    return time > maxDate.getTime();
+    return date > maxDate;
   }
 
   return false;

package/ui.form-calendar/services/date.service.js

@@ -1,9 +1,4 @@
-import {
-  LOCALE_TYPE,
-  DAYS_IN_WEEK,
-  SECONDS_IN_MINUTES,
-  MILLISECONDS_IN_MINUTE,
-} from "../constants";
+import { LOCALE_TYPE, DAYS_IN_WEEK, SECONDS_IN_MINUTES } from "../constants";
 
 const daysMap = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
 const monthsMap = [
@@ -25,10 +20,6 @@ export function minutesToSeconds(minutes) {
   return Math.trunc(minutes * SECONDS_IN_MINUTES);
 }
 
-export function utcToGMT(date) {
-  return new Date(date.getTime() + date.getTimezoneOffset() * MILLISECONDS_IN_MINUTE);
-}
-
 export function getDaysInMonth(date) {
   return new Date(new Date(date.valueOf()).setDate(0)).getDate();
 }
@@ -152,19 +143,6 @@ export function getStartOfDay(date) {
   return localDate;
 }
 
-export function gmtToUTC(date) {
-  return new Date(
-    Date.UTC(
-      date.getUTCFullYear(),
-      date.getUTCMonth(),
-      date.getUTCDate(),
-      date.getUTCHours(),
-      date.getUTCMinutes(),
-      date.getUTCSeconds(),
-    ),
-  );
-}
-
 export function getSortedLocale(locale, type) {
   const targetMap = type === LOCALE_TYPE.month ? monthsMap : daysMap;
 

package/ui.form-date-picker/configs/default.config.js

@@ -109,13 +109,13 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaultVariants: {
-    dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     size: "md",
     openDirectionX: "auto",
     openDirectionY: "auto",
     timepicker: false,
     disabled: false,
+    dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-date-picker/index.stories.js

@@ -33,12 +33,21 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots };
   },
+  data() {
+    return {
+      value: this.args.value,
+    };
+  },
   template: `
-    <UDatePicker v-bind="args" v-model="args.date">
+    <UDatePicker v-bind="args" v-model="value">
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
       </template>
     </UDatePicker>
+
+    <div class="mt-4">
+      {{ value }}
+    </div>
   `,
 });
 
@@ -64,12 +73,11 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
+const OpenDirectionTemplate = (args) => ({
   components: { UDatePicker, URow },
   setup() {
     return {
       args,
-      directions: argTypes.openDirection.options,
     };
   },
   template: `
@@ -117,7 +125,7 @@ const SlotTemplate = (args) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { date: 1645653600 };
+Default.args = { value: new Date() };
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = { label: "" };
@@ -138,13 +146,17 @@ export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder" };
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", date: 1645653600 };
+DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: "28.06.2024" };
 
 export const Timepicker = DefaultTemplate.bind({});
-Timepicker.args = { timepicker: true, date: 1645653600 };
+Timepicker.args = { timepicker: true, value: new Date(2024, 2, 14, 12, 24, 14) };
 
 export const MinMax = DefaultTemplate.bind({});
-MinMax.args = { minDate: "2022-02-22", maxDate: "2022-02-26", date: 1645653600 };
+MinMax.args = {
+  minDate: new Date(2022, 2, 22),
+  maxDate: new Date(2022, 2, 26),
+  value: new Date(2022, 2, 24),
+};
 
 export const slotIcon = SlotTemplate.bind({});
 slotIcon.args = {

package/ui.form-date-picker/index.vue

@@ -61,11 +61,7 @@ import { VIEW } from "../ui.form-calendar/constants";
 
 import UIService, { getRandomId } from "../service.ui";
 
-import {
-  addDays,
-  isSameDay,
-  getDateFromUnixTimestamp,
-} from "../ui.form-calendar/services/date.service";
+import { addDays, isSameDay } from "../ui.form-calendar/services/date.service";
 
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
@@ -95,10 +91,10 @@ const props = defineProps({
   },
 
   /**
-   * Datepicker value (timestamp).
+   * Datepicker value in JS Date Object or String formatted in provided props.dateFormat.
    */
   modelValue: {
-    type: Number,
+    type: [Object, String],
     default: null,
   },
 
@@ -301,7 +297,7 @@ function onBlur(event) {
 }
 
 function formatUserDate(data) {
-  if (props.dateFormat !== STANDARD_USER_FORMAT) return data;
+  if (props.userFormat !== STANDARD_USER_FORMAT) return data;
 
   const i18nGlobal = tm(UDatePicker);
   const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
@@ -310,12 +306,11 @@ function formatUserDate(data) {
   const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);
   const formattedDateWithoutDay = formattedDate.split(",").slice(1).join("").trim();
 
-  const selectedDate = getDateFromUnixTimestamp(localValue.value);
   const today = new Date();
 
-  const isToday = isSameDay(today, selectedDate);
-  const isYesterday = isSameDay(addDays(today, -1), selectedDate);
-  const isTomorrow = isSameDay(addDays(today, 1), selectedDate);
+  const isToday = isSameDay(today, localValue.value);
+  const isYesterday = isSameDay(addDays(today, -1), localValue.value);
+  const isTomorrow = isSameDay(addDays(today, 1), localValue.value);
 
   if (isToday) {
     prefix = currentLocale.value.today;

package/ui.form-date-picker-range/configs/default.config.js

@@ -200,7 +200,7 @@ export default /*tw*/ {
     openDirectionY: "auto",
     timepicker: false,
     disabled: false,
-    dateFormat: "d.m.Y",
+    dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-date-picker-range/index.stories.js

@@ -14,8 +14,8 @@ export default {
   component: UDatePickerRange,
   args: {
     value: {
-      from: 1651813634,
-      to: 1654492034,
+      from: new Date(2022, 1, 14),
+      to: new Date(2022, 2, 20),
     },
   },
   argTypes: {
@@ -37,12 +37,21 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots };
   },
+  data() {
+    return {
+      value: this.args.value,
+    };
+  },
   template: `
-    <UDatePickerRange v-bind="args" v-model="args.value">
+    <UDatePickerRange v-bind="args" v-model="value">
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
       </template>
     </UDatePickerRange>
+
+    <div class="mt-4">
+      {{ value }}
+    </div>
   `,
 });
 
@@ -142,9 +151,16 @@ error.args = { variant: "input", error: "some error" };
 
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
-  minDate: "22.02.2022",
-  maxDate: "26.02.2022",
-  value: { from: 1645653600, to: null },
+  minDate: new Date(2022, 2, 22),
+  maxDate: new Date(2022, 2, 26),
+  value: { from: new Date(2022, 2, 24), to: null },
+};
+
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = {
+  dateFormat: "d.m.Y",
+  userFormat: "d.m.Y",
+  value: { from: "28.06.2024", to: "30.06.2024" },
 };
 
 export const customRangeButton = DefaultTemplate.bind({});

package/ui.form-date-picker-range/index.vue

@@ -199,13 +199,9 @@ import UIService, { getRandomId } from "../service.ui";
 
 import {
   addDays,
-  gmtToUTC,
-  getUnixTimestampFromDate,
   addMonths,
   addYears,
-  getDateFromUnixTimestamp,
   getSortedLocale,
-  utcToGMT,
   getEndOfMonth,
   getEndOfQuarter,
   getEndOfWeek,
@@ -251,7 +247,7 @@ defineOptions({ name: "UDatePickerRange", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Dater picker range value as object with from and to keys (timestamp).
+   * Datepicker value in JS Date Objects or Strings formatted in provided props.dateFormat.
    */
   modelValue: {
     type: Object,
@@ -267,7 +263,7 @@ const props = defineProps({
   customRangeButton: {
     type: Object,
     default: () => ({
-      range: { from: 0, to: 0 },
+      range: { from: null, to: null },
       label: "",
       description: "",
     }),
@@ -444,9 +440,32 @@ const {
 } = useAttrs(props, { isShownMenu, isTop, isRight });
 const { tm } = useLocale();
 
+const i18nGlobal = tm(UDatePickerRange);
+
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+
+const locale = computed(() => {
+  const { months, weekdays } = currentLocale.value;
+
+  // formatted locale
+  return {
+    ...currentLocale.value,
+    months: {
+      shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
+      longhand: getSortedLocale(months.longhand, LOCALE_TYPE.month),
+    },
+    weekdays: {
+      shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
+      longhand: getSortedLocale(weekdays.longhand, LOCALE_TYPE.day),
+    },
+  };
+});
+
 const calendarValue = ref(props.modelValue);
 const activeDate = ref(
-  props.modelValue.from !== null ? getDateFromUnixTimestamp(props.modelValue.from) : new Date(),
+  props.modelValue.from !== null
+    ? parseDate(props.modelValue.from, props.dateFormat, locale.value)
+    : new Date(),
 );
 const period = ref(PERIOD.ownRange);
 const rangeStart = ref("");
@@ -457,39 +476,39 @@ const isHoverEvent = ref(false);
 const periodDateList = ref(null);
 
 const { isMobileBreakpoint } = useBreakpoint();
-const i18nGlobal = tm(UDatePickerRange);
 
 const localValue = computed({
-  get: () => props.modelValue,
+  get: () => {
+    return {
+      from: parseDate(props.modelValue.from || null, props.dateFormat, locale.value),
+      to: parseDate(props.modelValue.to || null, props.dateFormat, locale.value),
+    };
+  },
   set: (value) => {
-    if (value.from && value.to) {
+    if (value.from && value.to && !props.dateFormat) {
       emit("update:modelValue", value);
     }
 
-    activeDate.value = getDateFromUnixTimestamp(value.from || new Date());
-  },
-});
+    const parsedDateFrom = parseDate(value.from || null, props.dateFormat, locale.value);
+    const parsedDateTo = parseDate(value.to || null, props.dateFormat, locale.value);
 
-const rangeInputName = computed(() => `rangeInput-${props.id}`);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+    if (value.from && value.to && props.dateFormat) {
+      const newValue = {
+        from: formatDate(parsedDateFrom, props.dateFormat, locale.value),
+        to: formatDate(parsedDateTo, props.dateFormat, locale.value),
+      };
 
-const locale = computed(() => {
-  const { months, weekdays } = currentLocale.value;
+      emit("update:modelValue", newValue);
+    }
 
-  // formatted locale
-  return {
-    ...currentLocale.value,
-    months: {
-      shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
-      longhand: getSortedLocale(months.longhand, LOCALE_TYPE.month),
-    },
-    weekdays: {
-      shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
-      longhand: getSortedLocale(weekdays.longhand, LOCALE_TYPE.day),
-    },
-  };
+    activeDate.value = props.dateFormat
+      ? formatDate(parsedDateFrom || new Date(), props.dateFormat, locale.value)
+      : value.from || new Date();
+  },
 });
 
+const rangeInputName = computed(() => `rangeInput-${props.id}`);
+
 const userFormatLocale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -575,8 +594,8 @@ const userFormatDate = computed(() => {
 
   const isDefaultTitle = isPeriod.value.week || isPeriod.value.custom || isPeriod.value.ownRange;
 
-  const from = getDateFromUnixTimestamp(localValue.value.from);
-  const to = localValue.value.to !== null ? getDateFromUnixTimestamp(localValue.value.to) : null;
+  const from = localValue.value.from;
+  const to = localValue.value.to !== null ? localValue.value.to : null;
 
   if (isDefaultTitle) {
     let startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
@@ -637,14 +656,8 @@ watch(
   calendarValue,
   () => {
     localValue.value = {
-      from:
-        calendarValue.value.from === null
-          ? calendarValue.value.from
-          : getUnixTimestampFromDate(gmtToUTC(getDateFromUnixTimestamp(calendarValue.value.from))),
-      to:
-        calendarValue.value.to === null
-          ? calendarValue.value.to
-          : getUnixTimestampFromDate(gmtToUTC(getDateFromUnixTimestamp(calendarValue.value.to))),
+      from: calendarValue.value.from,
+      to: calendarValue.value.to,
     };
 
     nextTick(() => menuRef.value?.focus());
@@ -655,21 +668,22 @@ watch(
 watch(
   () => props.modelValue,
   () => {
-    if (props.modelValue.to !== calendarValue.value.to) {
+    if (String(props.modelValue.to) !== String(calendarValue.value.to)) {
       calendarValue.value.to = props.modelValue.to;
     }
 
-    if (props.modelValue.from !== calendarValue.value.from) {
+    if (String(props.modelValue.from) !== String(calendarValue.value.from)) {
       calendarValue.value.from = props.modelValue.from;
     }
 
+    const parsedDateFrom = parseDate(props.modelValue.from, props.dateFormat, locale.value);
+    const parsedDateTo = parseDate(props.modelValue.to, props.dateFormat, locale.value);
+
     rangeStart.value = props.modelValue.from
-      ? formatDate(getDateFromUnixTimestamp(props.modelValue.from), props.dateFormat, locale.value)
+      ? formatDate(parsedDateFrom, "d.m.Y", locale.value)
       : "";
 
-    rangeEnd.value = props.modelValue.to
-      ? formatDate(getDateFromUnixTimestamp(props.modelValue.to), props.dateFormat, locale.value)
-      : "";
+    rangeEnd.value = props.modelValue.to ? formatDate(parsedDateTo, "d.m.Y", locale.value) : "";
 
     inputRangeStartError.value = "";
     inputRangeEndError.value = "";
@@ -678,13 +692,11 @@ watch(
 );
 
 watch(period, () => {
-  activeDate.value =
-    localValue.value.from !== null ? getDateFromUnixTimestamp(localValue.value.from) : new Date();
+  activeDate.value = localValue.value.from !== null ? localValue.value.from : new Date();
 });
 
 function onClickPeriodButton(periodName) {
-  const localDate =
-    localValue.value.from !== null ? getDateFromUnixTimestamp(localValue.value.from) : new Date();
+  const localDate = localValue.value.from !== null ? localValue.value.from : new Date();
 
   if (periodName === PERIOD.week) {
     periodDateList.value = getWeekDateList(localDate, locale.value.months.shorthand);
@@ -736,37 +748,21 @@ function onClickCustomRangeButton() {
 }
 
 function selectCustomRange() {
-  const from =
-    typeof props.customRangeButton.range.from === "number"
-      ? getDateFromUnixTimestamp(props.customRangeButton.range.from)
-      : props.customRangeButton.range.from;
-
-  const to =
-    typeof props.customRangeButton.range.to === "number"
-      ? getDateFromUnixTimestamp(props.customRangeButton.range.to)
-      : props.customRangeButton.range.to;
-
   localValue.value = {
-    from: getUnixTimestampFromDate(gmtToUTC(from)),
-    to: getUnixTimestampFromDate(gmtToUTC(to)),
+    from: props.customRangeButton.range.from,
+    to: props.customRangeButton.range.to,
   };
 }
 
 function isDatePeriodOutOfRange(datePeriod) {
   return (
     dateIsOutOfRange(
-      getDateFromUnixTimestamp(datePeriod.startRange),
+      datePeriod.startRange,
       props.minDate,
       props.maxDate,
       locale.value,
       props.dateFormat,
-    ) ||
-    dateIsOutOfRange(
-      getDateFromUnixTimestamp(datePeriod.endRange),
-      props.minDate,
-      props.maxDate,
-      props.dateFormat,
-    )
+    ) || dateIsOutOfRange(datePeriod.endRange, props.minDate, props.maxDate, props.dateFormat)
   );
 }
 
@@ -874,8 +870,7 @@ function onInputRangeInput(value, type) {
     inputRangeEndError.value = error;
   }
 
-  const parsedValue = gmtToUTC(parseDate(value || new Date(), props.dateFormat, locale.value));
-  const unixTimeValue = getUnixTimestampFromDate(parsedValue);
+  const parsedValue = parseDate(value || new Date(), props.dateFormat, locale.value);
   const isOutOfRange = dateIsOutOfRange(
     parsedValue,
     props.minDate,
@@ -883,25 +878,25 @@ function onInputRangeInput(value, type) {
     locale.value,
     props.dateFormat,
   );
-  const isToLessThanFrom = unixTimeValue <= localValue.value.from;
+  const isToLessThanFrom = parsedValue <= localValue.value.from;
 
   if (type === INPUT_RANGE_TYPE.start && !error && !isOutOfRange) {
-    localValue.value.from = value ? unixTimeValue : "";
+    localValue.value.from = value ? parsedValue : "";
   }
 
   if (type === INPUT_RANGE_TYPE.end && !error && !isOutOfRange && !isToLessThanFrom) {
-    localValue.value.to = value ? unixTimeValue : "";
+    localValue.value.to = value ? parsedValue : "";
   }
 }
 
 setDefaultPeriodForButton();
 
 function setDefaultPeriodForButton() {
-  const from = utcToGMT(getDateFromUnixTimestamp(props.modelValue.from || new Date()));
-  const to = utcToGMT(getDateFromUnixTimestamp(props.modelValue.to || new Date()));
+  const from = props.modelValue.from || new Date();
+  const to = props.modelValue.to || new Date();
 
-  const customFrom = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.from));
-  const customTo = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.to));
+  const customFrom = props.customRangeButton.range.from || new Date();
+  const customTo = props.customRangeButton.range.to || new Date();
 
   const isWeekPeriod =
     String(from) === String(getStartOfWeek(from, { weekStartsOn: 1 })) &&
@@ -946,15 +941,15 @@ function onClickShiftRange(action) {
   const millisecondsPerDay =
     millisecondsPerSecond * secondsPerMinute * minutesPerHour * hoursPerDay;
 
-  const from = getDateFromUnixTimestamp(localValue.value.from);
-  const to = localValue.value.to ? getDateFromUnixTimestamp(localValue.value.to) : addDays(from, 1);
+  const from = localValue.value.from;
+  const to = localValue.value.to ? localValue.value.to : addDays(from, 1);
   const daysDifference = Math.ceil(Math.abs(getDatesDifference(from, to)) / millisecondsPerDay);
 
   if (action === "next") {
     if (isPeriod.value.ownRange) {
       const nextDate = {
-        to: getUnixTimestampFromDate(addDays(to, daysDifference)),
-        from: getUnixTimestampFromDate(addDays(from, daysDifference)),
+        to: addDays(to, daysDifference),
+        from: addDays(from, daysDifference),
       };
 
       if (isDatePeriodOutOfRange(nextDate)) return;
@@ -979,8 +974,8 @@ function onClickShiftRange(action) {
   } else {
     if (isPeriod.value.ownRange) {
       const previousDate = {
-        to: getUnixTimestampFromDate(gmtToUTC(addDays(to, daysDifference * -1))),
-        from: getUnixTimestampFromDate(gmtToUTC(addDays(from, daysDifference * -1))),
+        to: addDays(to, daysDifference * -1),
+        from: addDays(from, daysDifference * -1),
       };
 
       if (isDatePeriodOutOfRange(previousDate)) return;

package/ui.form-date-picker-range/services/dateRange.service.js

@@ -2,9 +2,7 @@ import {
   getWeeksInMonth,
   getStartOfWeek,
   getEndOfWeek,
-  gmtToUTC,
   addWeeks,
-  getUnixTimestampFromDate,
   getEndOfMonth,
   getStartOfMonth,
   getEndOfQuarter,
@@ -27,8 +25,8 @@ export function getYearDateList(date) {
 
     years.push({
       title: currentYear,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfYear(new Date(currentYear, month)))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfYear(new Date(currentYear, month)))),
+      startRange: getStartOfYear(new Date(currentYear, month)),
+      endRange: getEndOfYear(new Date(currentYear, month)),
     });
   }
 
@@ -51,8 +49,8 @@ export function getQuartersDateList(date, quarterLocales = "") {
 
     quarters.push({
       title: `${currentQuarter} ${quarterLocales}`,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfQuarter(newQuarter))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfQuarter(newQuarter))),
+      startRange: getStartOfQuarter(newQuarter),
+      endRange: getEndOfQuarter(newQuarter),
     });
   }
 
@@ -65,8 +63,8 @@ export function getMonthsDateList(date, monthLocales = []) {
   const months = monthLocales.map((item, index) => {
     return {
       title: item,
-      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfMonth(new Date(year, index)))),
-      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfMonth(new Date(year, index)))),
+      startRange: getStartOfMonth(new Date(year, index)),
+      endRange: getEndOfMonth(new Date(year, index)),
     };
   });
 
@@ -105,8 +103,8 @@ export function getWeekDateList(date, monthShortLocales = {}) {
 
     weeks.push({
       title,
-      startRange: getUnixTimestampFromDate(gmtToUTC(startOfWeekDate)),
-      endRange: getUnixTimestampFromDate(gmtToUTC(endOfWeekDate)),
+      startRange: startOfWeekDate,
+      endRange: endOfWeekDate,
     });
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.164",
+  "version": "0.0.165",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -53,11 +53,11 @@
             },
             {
               "name": "dateFormat",
-              "required": true,
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
             },
             {
               "name": "range",
@@ -701,10 +701,10 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Calendar value (timestamp).",
+              "description": "Calendar value in JS Date Object or String formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
-                "type": "number|object"
+                "type": "string|object"
               },
               "default": "null"
             },
@@ -741,8 +741,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "Y-m-d"
+              }
             },
             {
               "name": "userFormat",
@@ -755,7 +754,7 @@
             },
             {
               "name": "minDate",
-              "description": "Min date in format date string or Date.",
+              "description": "Min date in JS Date Object or Date String formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
                 "type": "date|string"
@@ -763,7 +762,7 @@
             },
             {
               "name": "maxDate",
-              "description": "Max date in format date string or Date.",
+              "description": "Max date in JS Date Object or Date String formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
                 "type": "date|string"
@@ -1533,10 +1532,10 @@
             },
             {
               "name": "modelValue",
-              "description": "Datepicker value (timestamp).",
+              "description": "Datepicker value in JS Date Object or String formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "object|string"
               },
               "default": "null"
             },
@@ -1625,8 +1624,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "Y-m-d"
+              }
             },
             {
               "name": "userFormat",
@@ -1695,7 +1693,7 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Dater picker range value as object with from and to keys (timestamp).",
+              "description": "Datepicker value in JS Date Objects or Strings formatted in provided props.dateFormat.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -1709,7 +1707,7 @@
                 "kind": "expression",
                 "type": "object"
               },
-              "default": "{\n  range: { from: 0, to: 0 },\n  label: \"\",\n  description: \"\"\n}"
+              "default": "{\n  range: { from: null, to: null },\n  label: \"\",\n  description: \"\"\n}"
             },
             {
               "name": "openDirectionX",
@@ -1814,8 +1812,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "d.m.Y"
+              }
             },
             {
               "name": "id",