Analogic for date component (#2115)

* add flag option analogic

* adjust unit test for analogic opt

* refactor analogicrenderer

* add BE unit test for date component

---------

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

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

@@ -207,6 +207,15 @@ describe("DateSelector with time Component", () => {
         const elt = getByTestId("CalendarIcon");
         expect(elt.parentElement?.tagName).toBe("BUTTON");
     });
+    it("renders with analog time picker", async () => {
+        const { getByTestId } = render(
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DateSelector date={curDateStr} withTime={true} analogic={true}/>
+            </LocalizationProvider>
+        );
+        const elt = getByTestId("CalendarIcon");
+        expect(elt.parentElement?.tagName).toBe("BUTTON");
+    });
     it("displays the right info for string", async () => {
         const { getByTestId } = render(
             <LocalizationProvider dateAdapter={AdapterDateFns}>

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

@@ -14,9 +14,14 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import Box from "@mui/material/Box";
 import Tooltip from "@mui/material/Tooltip";
+
 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 { BaseDateTimePickerSlotProps } from "@mui/x-date-pickers/DateTimePicker/shared";
+
+import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
+
 import { isValid } from "date-fns";
 import { ErrorBoundary } from "react-error-boundary";
 
@@ -41,13 +46,20 @@ interface DateSelectorProps extends TaipyActiveProps, TaipyChangeProps {
     editable?: boolean;
     label?: string;
     width?: string | number;
+    analogic? :boolean;
 }
 
 const boxSx = { display: "inline-block" };
 const textFieldProps = { textField: { margin: "dense" } } as BaseDateTimePickerSlotProps<Date>;
 
+const analogicRenderers = {
+    hours: renderTimeViewClock,
+    minutes: renderTimeViewClock,
+    seconds: renderTimeViewClock
+}
+
 const DateSelector = (props: DateSelectorProps) => {
-    const { updateVarName, withTime = false, id, propagate = true } = props;
+    const { updateVarName, withTime = false, id, propagate = true, analogic = false } = props;
     const dispatch = useDispatch();
     const formatConfig = useFormatConfig();
     const tz = formatConfig.timeZone;
@@ -110,17 +122,18 @@ const DateSelector = (props: DateSelectorProps) => {
                     {editable ? (
                         withTime ? (
                             <DateTimePicker
-                                {...(startProps as DateTimePickerProps<Date>)}
-                                {...(endProps as DateTimePickerProps<Date>)}
-                                value={value}
-                                onChange={handleChange}
-                                className={getSuffixedClassNames(className, "-picker")}
-                                disabled={!active}
-                                slotProps={textFieldProps}
-                                label={props.label}
-                                format={props.format}
-                                sx={dateSx}
-                            />
+                                    {...(startProps as DateTimePickerProps<Date>)}
+                                    {...(endProps as DateTimePickerProps<Date>)}
+                                    value={value}
+                                    onChange={handleChange}
+                                    className={getSuffixedClassNames(className, "-picker")}
+                                    disabled={!active}
+                                    slotProps={textFieldProps}
+                                    label={props.label}
+                                    format={props.format}
+                                    sx={dateSx}
+                                    viewRenderers={ analogic ? analogicRenderers : undefined }
+                                />
                         ) : (
                             <DatePicker
                                 {...(startProps as DatePickerProps<Date>)}

taipy/gui/_renderers/factory.py

@@ -143,6 +143,7 @@ class _Factory:
             [
                 ("with_time", PropertyType.boolean),
                 ("active", PropertyType.dynamic_boolean, True),
+                ("analogic", PropertyType.boolean),
                 ("min", PropertyType.dynamic_date),
                 ("max", PropertyType.dynamic_date),
                 ("editable", PropertyType.dynamic_boolean, True),

taipy/gui/viselements.json

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

tests/gui/control/test_date.py

@@ -39,6 +39,19 @@ def test_date_md_2(gui: Gui, test_client, helpers):
     ]
     helpers.test_control_md(gui, md_string, expected_list)
 
+def test_date_md_3(gui: Gui, test_client, helpers):
+    gui._bind_var_val("date", datetime.strptime("15 Dec 2020", "%d %b %Y"))
+    md_string = "<|{date}|date|with_time|analogic|label=a label|>"
+    expected_list = [
+        "<DateSelector",
+        'defaultDate="2020-12-',
+        'updateVarName="_TpDt_tpec_TpExPr_date_TPMDL_0"',
+        "date={_TpDt_tpec_TpExPr_date_TPMDL_0}",
+        "withTime={true}",
+        "analogic={true}",
+        'label="a label"',
+    ]
+    helpers.test_control_md(gui, md_string, expected_list)
 
 def test_date_md_width(gui: Gui, test_client, helpers):
     gui._bind_var_val("date", datetime.strptime("15 Dec 2020", "%d %b %Y"))