Analogic for daterange (#2116)

* add new option mode to show time picker as analog

* adjust unit test for analog time picker

* put analogicrenderer out of component

* fixing unit test

---------

Co-authored-by: Fred Lefévère-Laoide <90181748+FredLL-Avaiga@users.noreply.github.com>

frontend/taipy-gui/src/components/Taipy/DateRange.spec.tsx

@@ -81,6 +81,16 @@ describe("DateRange Component", () => {
         expect(elts).toHaveLength(2);
         expect(elts[0].parentElement?.tagName).toBe("BUTTON");
     });
+    it("renders with analog time picker", async () => {
+        const { getAllByTestId } = render(
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DateRange dates={curDates} withTime={true} analogic={true}/>
+            </LocalizationProvider>
+        );
+        const elts = getAllByTestId("CalendarIcon");
+        expect(elts).toHaveLength(2);
+        expect(elts[0].parentElement?.tagName).toBe("BUTTON");
+    });
     it("displays the right info for string", async () => {
         const { getAllByTestId } = render(
             <LocalizationProvider dateAdapter={AdapterDateFns}>

frontend/taipy-gui/src/components/Taipy/DateRange.tsx

@@ -18,6 +18,7 @@ import Typography from "@mui/material/Typography";
 import { DatePicker, DatePickerProps } from "@mui/x-date-pickers/DatePicker";
 import { BaseDateTimePickerSlotProps } from "@mui/x-date-pickers/DateTimePicker/shared";
 import { DateTimePicker, DateTimePickerProps } from "@mui/x-date-pickers/DateTimePicker";
+import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
 import { isValid } from "date-fns";
 import { ErrorBoundary } from "react-error-boundary";
 
@@ -40,6 +41,7 @@ interface DateRangeProps extends TaipyActiveProps, TaipyChangeProps {
     labelEnd?: string;
     separator?: string;
     width?: string | number;
+    analogic?: boolean;
 }
 
 const textFieldProps = { textField: { margin: "dense" } } as BaseDateTimePickerSlotProps<Date>;
@@ -65,8 +67,14 @@ const getRangeDateTime = (
     return [null, null];
 };
 
+const analogicRenderers = {
+    hours: renderTimeViewClock,
+    minutes: renderTimeViewClock,
+    seconds: renderTimeViewClock
+}
+
 const DateRange = (props: DateRangeProps) => {
-    const { updateVarName, withTime = false, id, propagate = true, separator = "-" } = props;
+    const { updateVarName, withTime = false, id, propagate = true, separator = "-", analogic = false } = props;
     const dispatch = useDispatch();
     const formatConfig = useFormatConfig();
     const tz = formatConfig.timeZone;
@@ -157,6 +165,7 @@ const DateRange = (props: DateRangeProps) => {
                                     label={props.labelStart}
                                     format={props.format}
                                     sx={dateSx}
+                                    viewRenderers={ analogic ? analogicRenderers : undefined }
                                 />
                                 <Typography>{separator}</Typography>
                                 <DateTimePicker
@@ -173,6 +182,7 @@ const DateRange = (props: DateRangeProps) => {
                                     label={props.labelEnd}
                                     format={props.format}
                                     sx={dateSx}
+                                    viewRenderers={ analogic ? analogicRenderers : undefined }
                                 />
                             </>
                         ) : (

taipy/gui/_renderers/factory.py

@@ -166,6 +166,7 @@ class _Factory:
             [
                 ("with_time", PropertyType.boolean),
                 ("active", PropertyType.dynamic_boolean, True),
+                ("analogic", PropertyType.boolean),
                 ("editable", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
                 ("label_start",),

taipy/gui/viselements.json

@@ -452,6 +452,12 @@
                         "type": "Union[str,int]",
                         "default_value": "None",
                         "doc": "The width of the date_range element."
+                    },
+                    {
+                        "name": "analogic",
+                        "type": "bool",
+                        "default_value": "False",
+                        "doc": "Whether or not to show timepicker as a clock."
                     }
                 ]
             }

tests/gui/control/test_date_range.py

@@ -44,6 +44,22 @@ def test_date_range_md_2(gui: Gui, test_client, helpers):
     ]
     helpers.test_control_md(gui, md_string, expected_list)
 
+def test_date_range_md_3(gui: Gui, test_client, helpers):
+    gui._bind_var_val(
+        "dates", [datetime.strptime("15 Dec 2020", "%d %b %Y"), datetime.strptime("31 Dec 2020", "%d %b %Y")]
+    )
+    md_string = "<|{dates}|date_range|with_time|analogic|label_start=start|label_end=end|>"
+    expected_list = [
+        "<DateRange",
+        'defaultDates="[&quot;2020-12-',
+        'updateVarName="_TpDr_tpec_TpExPr_dates_TPMDL_0"',
+        "dates={_TpDr_tpec_TpExPr_dates_TPMDL_0}",
+        "withTime={true}",
+        "analogic={true}",
+        'labelStart="start"',
+        'labelEnd="end"',
+    ]
+    helpers.test_control_md(gui, md_string, expected_list)
 
 def test_date_range_md_width(gui: Gui, test_client, helpers):
     # do not remove test_client: it brings an app context needed for this test