added picker modes in date/date range comps

Author: raheeliftikhar5

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

@@ -57,6 +57,13 @@ import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
+const PickerModeOptions = [
+  { label: "Date", value: "date" },
+  { label: "Week", value: "week" },
+  { label: "Month", value: "month" },
+  { label: "Quarter", value: "quarter" },
+  { label: "Year", value: "year" },
+]
 
 const validationChildren = {
   showValidationWhenEmpty: BoolControl,
@@ -91,11 +98,12 @@ const commonChildren = {
   inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
   childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
   timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
+  pickerMode: dropdownControl(PickerModeOptions, 'date'), 
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
 const datePickerProps = (props: RecordConstructorToView<typeof commonChildren>) =>
-  _.pick(props, "format", "inputFormat", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder");
+  _.pick(props, "format", "inputFormat", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder", "pickerMode");
 
 const timeFields = (children: CommonChildrenType, isMobile?: boolean) => [
   children.showTime.propertyView({ label: trans("date.showTime") }),
@@ -168,6 +176,7 @@ export type DateCompViewProps = Pick<
   | "secondStep"
   | "viewRef"
   | "timeZone"
+  | "pickerMode"
 > & {
   onFocus: () => void;
   onBlur: () => void;
@@ -178,6 +187,41 @@ export type DateCompViewProps = Pick<
   placeholder?: string | [string, string];
 };
 
+const getFormattedDate = (
+  time: dayjs.Dayjs | null | undefined,
+  showTime: boolean,
+  pickerMode: string,
+) => {
+  let updatedTime = undefined;
+  if (time?.isValid()) {
+    switch(pickerMode) {
+      case 'week': {
+        updatedTime = dayjs(time).day(0);
+        break;
+      }
+      case 'month': {
+        updatedTime = dayjs(time).set('date', 1);
+        break;
+      }
+      case 'quarter': {
+        updatedTime = dayjs(time).set('date', 1);
+        break;
+      }
+      case 'year': {
+        updatedTime = dayjs(time).set('date', 1).set('month', 1);
+        break;
+      }
+      default: {
+        updatedTime = time;
+        break;
+      }
+    }
+  }
+  return updatedTime
+    ? updatedTime.format(showTime ? DATE_TIME_FORMAT : DATE_FORMAT)
+    : "";
+}
+
 const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
   const defaultValue = { ...props.defaultValue }.value;
   const value = { ...props.value }.value;
@@ -226,9 +270,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         value={tempValue?.isValid() ? tempValue : null}
         onChange={(time) => {
           handleDateChange(
-            time && time.isValid()
-              ? time.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT)
-              : "",
+            getFormattedDate(time, props.showTime, props.pickerMode),
             props.value.onChange,
             props.onEvent
           );
@@ -255,9 +297,12 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
             placeholder: "2022-04-07 21:39:59",
             tooltip: trans("date.formatTip")
           })}
+          {children.pickerMode.propertyView({
+            label: trans("prop.pickerMode")
+          })}
           {children.timeZone.propertyView({
             label: trans("prop.timeZone")
-            })}
+          })}
         </Section>
 
         <FormDataPropertyView {...children} />
@@ -417,12 +462,10 @@ let DateRangeTmpCmp = (function () {
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         onChange={(start, end) => {
           props.start.onChange(
-            start && start.isValid()
-              ? start.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT)
-              : ""
+            getFormattedDate(start, props.showTime, props.pickerMode)
           );
           props.end.onChange(
-            end && end.isValid() ? end.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT) : ""
+            getFormattedDate(end, props.showTime, props.pickerMode)
           );
           props.onEvent("change");
         }}
@@ -468,6 +511,9 @@ let DateRangeTmpCmp = (function () {
               placeholder: "2022-04-07 21:39:59",
               tooltip: trans("date.formatTip"),
             })}
+            {children.pickerMode.propertyView({
+              label: trans("prop.pickerMode")
+            })}
             {children.timeZone.propertyView({
             label: trans("prop.timeZone")
             })}

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

@@ -61,9 +61,10 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
   return useUIView(
     <DateRangeMobileUIView {...props} />,
     <RangePickerStyled
-      {...omit(props, "onChange" , "format", "inputFormat", "$childrenInputFieldStyle")}
+      {...omit(props, "onChange" , "format", "inputFormat", "pickerMode", "$childrenInputFieldStyle")}
       format={props.inputFormat}
       ref={props.viewRef as any}
+      picker={props.pickerMode as any}
       value={[props.start, props.end]}
       disabledDate={(current: any) => disabledDate(current, props.minDate, props.maxDate)}
       onCalendarChange={(time: any) => {

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

@@ -53,7 +53,7 @@ export const DateUIView = (props: DataUIViewProps) => {
   return useUIView(
     <DateMobileUIView {...props} />,
     <DatePickerStyled
-      {...omit(props, "format", "inputFormat", "$childrenInputFieldStyle")}
+      {...omit(props, "format", "inputFormat", "pickerMode", "$childrenInputFieldStyle")}
       multiple={false}
       format={props.inputFormat}
       ref={props.viewRef as any}
@@ -63,7 +63,7 @@ export const DateUIView = (props: DataUIViewProps) => {
       minuteStep={props.minuteStep as any}
       secondStep={props.secondStep as any}
       disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)}
-      picker={"date"}
+      picker={props.pickerMode as any}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       placeholder={placeholder}
       panelRender={(panelNode) => (

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

@@ -231,6 +231,7 @@ export const en = {
     "color": "Color",
     "horizontalGridCells": "Horizontal Grid Cells",
     "timeZone": "TimeZone",
+    "pickerMode": "Picker Mode",
   },
   "autoHeightProp": {
     "auto": "Auto",