Skip to content

Add/time zone #1151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 10, 2024
Merged

Add/time zone #1151

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
79dca8b
function calculation reverted
MenamAfzal Sep 6, 2024
56ebeae
missing timeZones added
MenamAfzal Sep 6, 2024
fd6ad1d
default values added
MenamAfzal Sep 6, 2024
056337c
pull from origin
MenamAfzal Sep 9, 2024
6de6379
formatted values with respect to selective timeZone
MenamAfzal Sep 10, 2024
286c500
Merge branch 'dev' into add/time-zone
FalkWolsky Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
function calculation reverted
  • Loading branch information
@MenamAfzal
MenamAfzal committed Sep 6, 2024
commit 79dca8bf1f938f3fe7fe05f3e679e8f65ff74a23
274 changes: 44 additions & 230 deletions client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import _, { noop } from "lodash";
import dayjs from "dayjs";
import utc from 'dayjs/plugin/utc';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import timezone from 'dayjs/plugin/timezone';
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
import {
BoolCodeControl,
Expand Down Expand Up @@ -56,8 +54,6 @@ import { timeZoneOptions } from "./timeZone";


dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(customParseFormat);


const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
Expand Down Expand Up @@ -473,57 +469,21 @@ export const DatePickerComp = withExposingConfigs(datePickerControl, [
depsConfig({
name: "value",
desc: trans("export.datePickerValueDesc"),
depKeys: ["value", "showTime", "timeZone", "userTimeZone"],
depKeys: ["value", "showTime"],
func: (input) => {

let mom = null;
for (const format of DateParser) {
if (dayjs.utc(input.value, format).isValid()) {
mom = dayjs.utc(input.value, format);
break;
}
}

if (!input.showTime && mom?.hour() === 0 && mom?.minute() === 0 && mom?.second() === 0) {
mom = mom?.hour(12); // Default to noon to avoid day shift
}

if (mom?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userTimeZone : input.timeZone || 'UTC';
const formattedDate = mom.tz(tz).format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT);
return formattedDate;
}

return null;
const mom = Boolean(input.value) ? dayjs(input.value, DateParser) : null;
return mom?.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : null;
},
}),

depsConfig({
name: "formattedValue",
desc: trans("export.datePickerFormattedValueDesc"),
depKeys: ["value", "format", "timeZone", "userTimeZone"],

depKeys: ["value", "format"],
func: (input) => {
let mom = null;
for (const format of DateParser) {
if (dayjs.utc(input.value, format).isValid()) {
mom = dayjs.utc(input.value, format);
break;
}
}
if (!input.showTime && mom?.hour() === 0 && mom?.minute() === 0 && mom?.second() === 0) {
mom = mom?.hour(12); // Default to noon to avoid timezone-related day shifts
}
if (mom?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userTimeZone : input.timeZone || 'UTC';
const formattedTime = mom.tz(tz).format(input.format);
return formattedTime;
}
return '';
const mom = Boolean(input.value) ? dayjs(input.value, DateParser) : null;
return mom?.isValid() ? mom.format(input.format) : "";
},
}),


depsConfig({
name: "timestamp",
desc: trans("export.datePickerTimestampDesc"),
Expand Down Expand Up @@ -560,235 +520,89 @@ export let DateRangeComp = withExposingConfigs(dateRangeControl, [
depsConfig({
name: "start",
desc: trans("export.dateRangeStartDesc"),
depKeys: ["start", "showTime", "timeZone", "userRangeTimeZone"],
depKeys: ["start", "showTime"],
func: (input) => {
let mom = null;
for (const format of DateParser) {
if (dayjs.utc(input.start, format).isValid()) {
mom = dayjs.utc(input.start, format);
break;
}
}
if (!input.showTime && mom?.hour() === 0 && mom?.minute() === 0 && mom?.second() === 0) {
mom = mom?.hour(12);
}

if (mom?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
const formattedStart = mom.tz(tz).format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT);
return formattedStart;
}
return null;
const mom = Boolean(input.start) ? dayjs(input.start, DateParser): null;
return mom?.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : null;
},
}),

depsConfig({
name: "end",
desc: trans("export.dateRangeEndDesc"),
depKeys: ["end", "showTime", "timeZone", "userRangeTimeZone"],

depKeys: ["end", "showTime"],
func: (input) => {
let mom = null;
for (const format of DateParser) {
if (dayjs.utc(input.end, format).isValid()) {
mom = dayjs.utc(input.end, format);
break;
}
}
if (!input.showTime && mom?.hour() === 0 && mom?.minute() === 0 && mom?.second() === 0) {
mom = mom?.hour(12);
}

if (mom?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
const formattedEnd = mom.tz(tz).format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT);
return formattedEnd;
}
return null;
const mom = Boolean(input.end) ? dayjs(input.end, DateParser): null;
return mom?.isValid() ? mom.format(input.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : null;
},
}),

depsConfig({
name: "startTimestamp",
desc: trans("export.dateRangeStartTimestampDesc"),
depKeys: ["start", "timeZone", "userRangeTimeZone"],
depKeys: ["start"],
func: (input) => {

let mom = null;
for (const format of DateParser) {
if (dayjs.utc(input.start, format).isValid()) {
mom = dayjs.utc(input.start, format);
break;
}
}
if (mom?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
return mom.tz(tz).unix();
}
return "";
const mom = Boolean(input.start) ? dayjs(input.start, DateParser) : null;
return mom?.isValid() ? mom.unix() : "";
},
}),

depsConfig({
name: "endTimestamp",
desc: trans("export.dateRangeEndTimestampDesc"),
depKeys: ["end", "timeZone", "userRangeTimeZone"],
depKeys: ["end"],
func: (input) => {

let mom = null;
for (const format of DateParser) {
if (dayjs.utc(input.end, format).isValid()) {
mom = dayjs.utc(input.end, format);
break;
}
}
if (mom?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
return mom.tz(tz).unix();
}
return "";
const mom = Boolean(input.end) ? dayjs(input.end, DateParser) : null;
return mom?.isValid() ? mom.unix() : "";
},
}),

depsConfig({
name: "formattedValue",
desc: trans("export.dateRangeFormattedValueDesc"),
depKeys: ["start", "end", "format", "timeZone", "userRangeTimeZone"],
depKeys: ["start", "end", "format"],
func: (input) => {
let start = null;
let end = null;

for (const format of DateParser) {
if (dayjs.utc(input.start, format).isValid()) {
start = dayjs.utc(input.start, format);
break;
}
}
for (const format of DateParser) {
if (dayjs.utc(input.end, format).isValid()) {
end = dayjs.utc(input.end, format);
break;
}
}

//When the time is 00:00:00 and you convert it to a timezone behind UTC (e.g., UTC-5), the date can shift to the previous day
if (!input.showTime && start?.hour() === 0 && start?.minute() === 0 && start?.second() === 0) {
start = start?.hour(12);
}

if (!input.showTime && end?.hour() === 0 && end?.minute() === 0 && end?.second() === 0) {
end = end?.hour(12);
}

if (start?.isValid() || end?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';

const formattedStart = start?.isValid() ? start.tz(tz).format(input.format) : '';
const formattedEnd = end?.isValid() ? end.tz(tz).format(input.format) : '';
const formattedValue = [formattedStart, formattedEnd].filter(Boolean).join(" - ");
return formattedValue;
}
return '';
const start = Boolean(input.start) ? dayjs(input.start, DateParser): null;
const end = Boolean(input.end) ? dayjs(input.end, DateParser): null;
return [
start?.isValid() && start.format(input.format),
end?.isValid() && end.format(input.format),
]
.filter((item) => item)
.join(" - ");
},
}),


depsConfig({
name: "formattedStartValue",
desc: trans("export.dateRangeFormattedStartValueDesc"),
depKeys: ["start", "format", "timeZone", "userRangeTimeZone"],
depKeys: ["start", "format"],
func: (input) => {
let start = null;
// Loop through DateParser to find a valid format
for (const format of DateParser) {
if (dayjs.utc(input.start, format).isValid()) {
start = dayjs.utc(input.start, format);
break;
}
}

if (!input.showTime && start?.hour() === 0 && start?.minute() === 0 && start?.second() === 0) {
start = start?.hour(12);
}

if (start?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
const formattedStart = start.tz(tz).format(input.format);
return formattedStart;
}
return '';
const start = Boolean(input.start) ? dayjs(input.start, DateParser): null;
return start?.isValid() && start.format(input.format);
},
}),

depsConfig({
name: "formattedEndValue",
desc: trans("export.dateRangeFormattedEndValueDesc"),
depKeys: ["end", "format", "timeZone", "userRangeTimeZone"],
depKeys: ["end", "format"],
func: (input) => {
let end = null;
// Loop through DateParser to find a valid format
for (const format of DateParser) {
if (dayjs.utc(input.end, format).isValid()) {
end = dayjs.utc(input.end, format);
break;
}
}

if (!input.showTime && end?.hour() === 0 && end?.minute() === 0 && end?.second() === 0) {
end = end?.hour(12);
}

if (end?.isValid()) {
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
const formattedEnd = end.tz(tz).format(input.format);
return formattedEnd;
}
return '';
const end = Boolean(input.end) ? dayjs(input.end, DateParser): null;
return end?.isValid() && end.format(input.format);
},
}),


depsConfig({
name: "invalid",
desc: trans("export.invalidDesc"),
depKeys: ["start", "end", "required", "minTime", "maxTime", "minDate", "maxDate", "customRule", "timeZone", "userRangeTimeZone"],
func: (input) => {
const tz = input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
let startDate = null;
let endDate = null;

for (const format of DateParser) {
if (dayjs.utc(input.start, format).isValid()) {
startDate = dayjs.utc(input.start, format).tz(tz);
break;
}
}
for (const format of DateParser) {
if (dayjs.utc(input.end, format).isValid()) {
endDate = dayjs.utc(input.end, format).tz(tz);
break;
}
}

const startInvalid = startDate && (!startDate.isValid() || (input.minDate && startDate.isBefore(dayjs(input.minDate).tz(tz))) || (input.maxDate && startDate.isAfter(dayjs(input.maxDate).tz(tz))));
const endInvalid = endDate && (!endDate.isValid() || (input.minDate && endDate.isBefore(dayjs(input.minDate).tz(tz))) || (input.maxDate && endDate.isAfter(dayjs(input.maxDate).tz(tz))));

return startInvalid || endInvalid;
},
}),

depsConfig({
name: "timeZone",
desc: trans("export.timeZoneDesc"),
depKeys: ["timeZone", "userRangeTimeZone"],
func: (input) => {
return input.timeZone === 'UserChoice' ? input.userRangeTimeZone : input.timeZone || 'UTC';
},
depKeys: ["start", "end", "required", "minTime", "maxTime", "minDate", "maxDate", "customRule"],
func: (input) =>
validate({
...input,
value: { value: input.start },
}).validateStatus !== "success" ||
validate({
...input,
value: { value: input.end },
}).validateStatus !== "success",
}),
...CommonNameConfig,
]);


DateRangeComp = withMethodExposing(DateRangeComp, [
...dateRefMethods,
{
Expand Down Expand Up @@ -830,4 +644,4 @@ DateRangeComp = withMethodExposing(DateRangeComp, [
comp.children.end.getView().onChange(data.end);
},
},
]);
]);
Loading