dropDown added

Author: MenamAfzal

client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx

@@ -48,6 +48,8 @@ import { RefControl } from "comps/controls/refControl";
 // import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
 import { EditorContext } from "comps/editorState";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { timeZoneOptions } from "./timeZone";
 
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
@@ -80,6 +82,7 @@ const commonChildren = {
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
   inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
+  timeZone: dropdownControl(timeZoneOptions, "DatelineStandard"),
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
@@ -224,6 +227,9 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
             placeholder: "2022-04-07 21:39:59",
             tooltip: trans("date.formatTip")
           })}
+          {children.timeZone.propertyView({
+            label: trans("prop.timeZone")
+            })}
         </Section>
 
         <FormDataPropertyView {...children} />
@@ -380,6 +386,9 @@ export const dateRangeControl = (function () {
               placeholder: "2022-04-07 21:39:59",
               tooltip: trans("date.formatTip"),
             })}
+            {children.timeZone.propertyView({
+            label: trans("prop.timeZone")
+            })}
           </Section>
 
           <FormDataPropertyView {...children} />

client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx

@@ -52,6 +52,8 @@ import { RefControl } from "comps/controls/refControl";
 import { TimePickerProps } from "antd/es/time-picker";
 
 import { EditorContext } from "comps/editorState";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { timeZoneOptions } from "./timeZone";
 
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
@@ -81,6 +83,7 @@ const commonChildren = {
   ),
   inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
   suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
+  timeZone: dropdownControl(timeZoneOptions, "DatelineStandard"),
   viewRef: RefControl<CommonPickerMethods>,
   ...validationChildren,
 };
@@ -196,7 +199,9 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
           label: trans("prop.defaultValue"),
           tooltip: trans("time.formatTip"),
         })}
-        
+        {children.timeZone.propertyView({
+            label: trans("prop.timeZone")
+        })}
       </Section>
 
       <FormDataPropertyView {...children} />
@@ -336,6 +341,9 @@ export const timeRangeControl = (function () {
             label: trans("time.end"),
             tooltip: trans("time.formatTip"),
           })}
+          {children.timeZone.propertyView({
+            label: trans("prop.timeZone")
+            })}
         </Section>
 
         <FormDataPropertyView {...children} />

client/packages/lowcoder/src/comps/comps/dateComp/timeZone.ts

@@ -0,0 +1,27 @@
+export const timeZoneOptions = [
+    { label: "(UTC-12:00) International Date Line West", value: "DatelineStandard" },
+    { label: "(UTC-11:00) Coordinated Universal Time-11", value: "UTC11" },
+    { label: "(UTC-10:00) Hawaii", value: "HawaiianStandard" },
+    { label: "(UTC-09:00) Alaska", value: "AlaskanStandard" },
+    { label: "(UTC-08:00) Baja California", value: "PacificStandardMexico" },
+    { label: "(UTC-07:00) Pacific Daylight Time (US & Canada)", value: "PacificDaylight" },
+    { label: "(UTC-06:00) Central Time (US & Canada)", value: "CentralStandard" },
+    { label: "(UTC-05:00) Eastern Time (US & Canada)", value: "EasternStandard" },
+    { label: "(UTC-04:00) Atlantic Time (Canada)", value: "AtlanticStandard" },
+    { label: "(UTC-03:00) Buenos Aires", value: "ArgentinaStandard" },
+    { label: "(UTC-02:00) Coordinated Universal Time-02", value: "UTC02" },
+    { label: "(UTC-01:00) Cape Verde Is.", value: "CapeVerdeStandard" },
+    { label: "(UTC+00:00) Coordinated Universal Time", value: "UTC" },
+    { label: "(UTC+01:00) Amsterdam, Berlin, Rome, Vienna", value: "WEuropeStandard" },
+    { label: "(UTC+02:00) Athens, Bucharest", value: "GTBStandard" },
+    { label: "(UTC+03:00) Moscow, St. Petersburg", value: "MoscowStandard" },
+    { label: "(UTC+04:00) Abu Dhabi, Muscat", value: "ArabianStandard" },
+    { label: "(UTC+05:00) Islamabad, Karachi", value: "PakistanStandard" },
+    { label: "(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi", value: "IndiaStandard" },
+    { label: "(UTC+06:00) Dhaka", value: "BangladeshStandard" },
+    { label: "(UTC+07:00) Bangkok, Hanoi, Jakarta", value: "SEAsiaStandard" },
+    { label: "(UTC+08:00) Beijing, Chongqing, Hong Kong", value: "ChinaStandard" },
+    { label: "(UTC+09:00) Tokyo, Seoul", value: "JapanStandard" },
+    { label: "(UTC+10:00) Sydney, Melbourne", value: "AUSEasternStandard" },
+    { label: "User Choice", value: "UserChoice" },
+];

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -222,6 +222,7 @@ export const en = {
     "horizontalGridCells": "Horizontal Grid Cells",
     "showHorizontalScrollbar": "Show Horizontal Scrollbar",
     "showVerticalScrollbar": "Show Vertical Scrollbar",
+    "timeZone": "TimeZone",
   },
   "autoHeightProp": {
     "auto": "Auto",