feat: mo.ui.datetime, mo.ui.date_range (#2174)

* feat: mo.ui.datetime, mo.ui.date_range

* lock

* keyword fix

docs/api/inputs/dates.md

@@ -0,0 +1,56 @@
+# Dates
+
+## Single date
+
+```{eval-rst}
+.. marimo-embed::
+    @app.cell
+    def __():
+        date = mo.ui.date(label="Start Date")
+        return
+
+    @app.cell
+    def __():
+        mo.hstack([date, mo.md(f"Has value: {date.value}")])
+        return
+```
+
+```{eval-rst}
+.. autoclass:: marimo.ui.date
+  :members:
+
+  .. autoclasstoc:: marimo._plugins.ui._impl.input.date
+```
+
+## Date and time
+
+```{eval-rst}
+.. marimo-embed::
+    @app.cell
+    def __():
+        datetime = mo.ui.datetime(label="Start Date")
+        return
+
+    @app.cell
+    def __():
+        mo.hstack([datetime, mo.md(f"Has value: {datetime.value}")])
+        return
+```
+
+## Date range
+
+````{eval-rst}
+
+
+```{eval-rst}
+.. marimo-embed::
+    @app.cell
+    def __():
+        date_range = mo.ui.date_range(label="Start Date")
+        return
+
+    @app.cell
+    def __():
+        mo.hstack([date_range, mo.md(f"Has value: {date_range.value}")])
+        return
+````

docs/api/inputs/index.md

@@ -12,7 +12,7 @@
   code_editor
   dataframe
   data_explorer
-  date
+  dates
   dictionary
   dropdown
   file
@@ -49,6 +49,8 @@ powerful notebooks and apps. These elements are available in `marimo.ui`.
   marimo.ui.dataframe
   marimo.ui.data_explorer
   marimo.ui.date
+  marimo.ui.datetime
+  marimo.ui.date_range
   marimo.ui.dictionary
   marimo.ui.dropdown
   marimo.ui.file

examples/marimo/inputs.py

@@ -1,6 +1,13 @@
+# /// script
+# requires-python = ">=3.11"
+# dependencies = [
+#     "marimo",
+# ]
+# ///
+
 import marimo
 
-__generated_with = "0.8.5"
+__generated_with = "0.8.7"
 app = marimo.App(width="medium")
 
 
@@ -10,7 +17,7 @@ def __(mo):
         r"""
         # Inputs
 
-        There are many way that a user can input with your notebook, such as text boxes, sliders, dates, and more. 
+        There are many way that a user can input with your notebook, such as text boxes, sliders, dates, and more.
         """
     )
     return
@@ -169,10 +176,20 @@ def __(mo):
         start=datetime.date(2020, 1, 1),
         stop=datetime.date(2020, 12, 31),
     )
-    mo.hstack([start_date, "➡️", end_date]).left()
     return datetime, end_date, start_date
 
 
+@app.cell
+def __(end_date, mo, start_date):
+    mo.hstack(
+        [
+            mo.hstack([start_date, "➡️", end_date]).left(),
+            mo.md(f"From {start_date.value} to {end_date.value}"),
+        ]
+    )
+    return
+
+
 @app.cell
 def __(mo):
     mo.md("""## Dropdowns""")

frontend/package.json

@@ -33,6 +33,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
+    "@internationalized/date": "^3.5.5",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.1",
     "@lezer/lr": "^1.4.2",
@@ -113,7 +114,6 @@
     "react-arborist": "^3.4.0",
     "react-aria-components": "^1.3.2",
     "react-codemirror-merge": "^4.23.0",
-    "react-day-picker": "^8.10.1",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-grid-layout": "^1.4.4",

frontend/src/components/ui/aria-popover.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { cn } from "@/utils/cn";
+import {
+  Dialog as AriaDialog,
+  type DialogProps as AriaDialogProps,
+  DialogTrigger as AriaDialogTrigger,
+  Popover as AriaPopover,
+  type PopoverProps as AriaPopoverProps,
+  composeRenderProps,
+} from "react-aria-components";
+
+const PopoverTrigger = AriaDialogTrigger;
+
+const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => (
+  <AriaPopover
+    offset={offset}
+    className={composeRenderProps(className, (className) =>
+      cn(
+        "z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+        /* Entering */
+        "data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95",
+        /* Exiting */
+        "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95",
+        /* Placement */
+        "data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",
+        className,
+      ),
+    )}
+    {...props}
+  />
+);
+
+const PopoverDialog = ({ className, ...props }: AriaDialogProps) => {
+  return (
+    <AriaDialog className={cn("p-4 outline outline-0", className)} {...props} />
+  );
+};
+
+export { Popover, PopoverTrigger, PopoverDialog };