fix: datepicker and timepicker issues fixed

Author: raheeliftikhar5

client/packages/lowcoder-dev-utils/external.js

@@ -22,6 +22,10 @@ export const libs = [
     name: "moment",
     extractDefault: true,
   },
+  {
+    name: "dayjs",
+    extractDefault: true,
+  },
   {
     name: "lowcoder-sdk",
     from: "./src/index.sdk.ts",

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

@@ -154,8 +154,10 @@ export type DateCompViewProps = Pick<
 };
 
 export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
-  const time = dayjs(props.value.value, DateParser);
-
+  let time = dayjs(null);
+  if(props.value.value !== '') {
+    time = dayjs(props.value.value, DateParser);
+  }
   return props.label({
     required: props.required,
     style: props.style,
@@ -242,8 +244,14 @@ export const dateRangeControl = (function () {
   };
 
   return new UICompBuilder(childrenMap, (props) => {
-    const start = dayjs(props.start.value, DateParser);
-    const end = dayjs(props.end.value, DateParser);
+    let start = dayjs(null);
+    let end = dayjs(null);
+    if(props.start.value !== '') {
+      start = dayjs(props.start.value, DateParser);
+    }
+    if(props.end.value !== '') {
+      end = dayjs(props.end.value, DateParser);
+    }
 
     const children = (
       <DateRangeUIView

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

@@ -17,8 +17,11 @@ export const handleDateChange = (
 };
 
 export const disabledDate = (current: dayjs.Dayjs, min: string, max: string) => {
-  const maxDate = dayjs(max, DateParser);
-  const minDate = dayjs(min, DateParser);
+  const tmpMinDate = min === '' ? undefined : min
+  const tmpMaxDate = max === '' ? undefined : max
+  const maxDate = dayjs(tmpMaxDate, DateParser);
+  const minDate = dayjs(tmpMinDate, DateParser);
+
   return (
     current &&
     current.isValid() &&
@@ -27,8 +30,11 @@ export const disabledDate = (current: dayjs.Dayjs, min: string, max: string) =>
 };
 
 export const disabledTime = (min: string, max: string) => {
-  const maxTime = dayjs(max, TimeParser);
-  const minTime = dayjs(min, TimeParser);
+  const tmpMinTime = min === '' ? undefined : min
+  const tmpMaxTime = max === '' ? undefined : max
+  const maxTime = dayjs(tmpMaxTime, TimeParser);
+  const minTime = dayjs(tmpMinTime, TimeParser);
+
   return {
     disabledHours: () => {
       let disabledHours: number[] = [];

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

@@ -133,7 +133,10 @@ export type TimeCompViewProps = Pick<
 };
 
 export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
-  const time = dayjs(props.value.value, TimeParser);
+  let time = dayjs(null);
+  if(props.value.value !== '') {
+    time = dayjs(props.value.value, TimeParser);
+  }
 
   return props.label({
     required: props.required,
@@ -147,8 +150,8 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         {...timePickerComps(props)}
         hourStep={props.hourStep as hourStepType}
-        minuteStep={props.hourStep as minuteStepType}
-        secondStep={props.hourStep as secondStepType}
+        minuteStep={props.minuteStep as minuteStepType}
+        secondStep={props.secondStep as secondStepType}
         onChange={(time) => {
           handleDateChange(
             time && time.isValid() ? time.format(TIME_FORMAT) : "",
@@ -209,21 +212,27 @@ export const timeRangeControl = (function () {
   };
 
   return new UICompBuilder(childrenMap, (props) => {
-    const start = dayjs(props.start.value, TimeParser);
-    const end = dayjs(props.end.value, TimeParser);
+    let start = null;
+    if(props.start.value !== '') {
+      start = dayjs(props.start.value, TimeParser);
+    }
+    let end = null;
+    if(props.end.value !== '') {
+      end = dayjs(props.end.value, TimeParser);
+    }
 
     const children = (
       <TimeRangeUIView
         viewRef={props.viewRef}
         $style={props.style}
         disabled={props.disabled}
-        start={start.isValid() ? start : null}
-        end={end.isValid() ? end : null}
+        start={start?.isValid() ? start : null}
+        end={end?.isValid() ? end : null}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         {...timePickerComps(props)}
         hourStep={props.hourStep as hourStepType}
-        minuteStep={props.hourStep as minuteStepType}
-        secondStep={props.hourStep as secondStepType}
+        minuteStep={props.minuteStep as minuteStepType}
+        secondStep={props.secondStep as secondStepType}
         onChange={(start, end) => {
           props.start.onChange(start && start.isValid() ? start.format(TIME_FORMAT) : "");
           props.end.onChange(end && end.isValid() ? end.format(TIME_FORMAT) : "");

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

@@ -28,7 +28,7 @@ export interface TimeRangeUIViewProps extends TimeCompViewProps {
 
 export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
   const editorState = useContext(EditorContext);
-  console.log(props);
+
   return useUIView(
     <TimeRangeMobileUIView {...props} />,
     <RangePickerStyled

client/packages/lowcoder/src/comps/comps/formComp/generate/comp.tsx

@@ -88,6 +88,7 @@ const multiSelectComps: CompConfig[] = [
 const dateComp: CompConfig = {
   type: "date",
 };
+// TODO: RAHEEL
 function dateTimeToTimestamp(compName: string) {
   return "moment(" + compName + ".value || 0).valueOf()";
 }

client/packages/lowcoder/src/comps/hooks/hookComp.tsx

@@ -85,6 +85,7 @@ const HookMap: HookCompMapRawType = {
   currentTime: CurrentTimeHookComp,
   lodashJsLib: LodashJsLib,
   dayJsLib: DayJsLib,
+  momentJsLib: DayJsLib,
   utils: UtilsComp,
   message: MessageComp,
   localStorage: LocalStorageComp,

client/packages/lowcoder/src/comps/hooks/hookCompTypes.tsx

@@ -8,6 +8,7 @@ const AllHookComp = [
   "currentTime",
   "lodashJsLib",
   "dayJsLib",
+  "momentJsLib",
   "utils",
   "message",
   "localStorage",
@@ -46,6 +47,9 @@ const HookCompConfig: Record<
   dayJsLib: {
     category: "hide",
   },
+  momentJsLib: {
+    category: "hide",
+  },
   utils: { category: "hide" },
   message: { category: "hide" },
 };

client/packages/lowcoder/src/comps/hooks/hookListComp.tsx

@@ -16,6 +16,7 @@ const defaultHookListValue = [
   // { compType: "windowSize", name: "windowSize" },
   { compType: "urlParams", name: "url" },
   { compType: "dayJsLib", name: "dayjs" },
+  // { compType: "momentJsLib", name: "dayjs" },
   { compType: "lodashJsLib", name: "_" },
   { compType: "utils", name: "utils" },
   { compType: "message", name: "message" },

client/packages/lowcoder/src/comps/utils/propertyUtils.tsx

@@ -109,12 +109,12 @@ export const formatPropertyView = (params: {
         {trans("date.reference")}  
         <a
           href={`${
-            language === "zh" ? "http://momentjs.cn" : "http://momentjs.com"
-          }/docs/#/displaying/format/`}
+            language === "zh" ? "https://day.js.org/docs/zh-CN" : "https://day.js.org/docs/en"
+          }/display/format`}
           target={"_blank"}
           rel="noreferrer"
         >
-          momentjs format
+          dayjs format
         </a>
       </>
     ),