DatePicker: base setup

docs/reference/src/language/widgets/datepicker.md

@@ -0,0 +1,62 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+## struct `Date`
+
+Defines a date with day, month, and year
+
+### Fields
+
+-   **`day`(int)**: The day value (range from 1 to 31).
+-   **`month`(int)**: The month value (range from 1 to 12).
+-   **`year`(int)**: The year value.
+
+## `DatePicker`
+
+Use a date picker to let the user select a date.
+
+### Properties
+
+-   **`title`** (_in_ _string_): The text that is displayed at the top of the picker.
+-   **`cancel-label`** (_in_ _string_): The text written in the cancel button.
+-   **`ok-label`** (_in_ _string_): The text written in the ok button.
+-   **`date`**: (_in_ _DAte_): Set the initinal displayed date. 
+
+### Callbacks
+
+-   **`canceled()`**: The cancel button was clicked.
+-   **`accepted(Date)`** The ok button was clicked.
+
+### Example
+
+```slint
+import { DatePicker, Button } from "std-widgets.slint";
+export component Example inherits Window {
+    width: 600px;
+    height: 600px;
+
+    date-picker-button := Button {
+        text: @tr("Open Date Picker");
+
+        clicked => {
+            date-picker.show();
+        }
+    }
+
+    date-picker := PopupWindow {
+        width: 360px;
+        height: 524px;
+        close-on-click: false;
+
+        DatePicker {
+            canceled => {
+                date-picker.close();
+            }
+
+            accepted(date) => {
+                debug(date);
+                date-picker.close();
+            }
+        }
+    }
+}
+```

docs/reference/src/language/widgets/index.rst

@@ -34,3 +34,4 @@ Widgets
    textedit.md
    verticalbox.md
    timepicker.md
+   datepicker.md

examples/gallery/ui/pages/controls_page.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import { Button, GroupBox, SpinBox, ComboBox, CheckBox, LineEdit, TabWidget, VerticalBox, HorizontalBox,
-    Slider, ProgressIndicator, SpinBox, Switch, Spinner, GridBox, TimePicker } from "std-widgets.slint";
+    Slider, ProgressIndicator, SpinBox, Switch, Spinner, GridBox, TimePicker, DatePicker } from "std-widgets.slint";
 import { GallerySettings } from "../gallery_settings.slint";
 import { Page } from "page.slint";
 
@@ -87,7 +87,7 @@ export component ControlsPage inherits Page {
     }
 
     GroupBox {
-        title: @tr("LineEdit - SpinBox - TimePicker");
+        title: @tr("LineEdit - SpinBox - TimePicker - DatePicker");
         vertical-stretch: 0;
 
         HorizontalBox {
@@ -112,6 +112,13 @@ export component ControlsPage inherits Page {
                     time-picker.show();
                 }
             }
+
+            Button {
+                text: @tr("Open date picker");
+                clicked => {
+                    date-picker.show();
+                }
+            }
         }
     }
 
@@ -238,4 +245,23 @@ export component ControlsPage inherits Page {
             }
         }
     }
+
+    date-picker := PopupWindow {
+        x: (root.width - 360px) / 2;
+        y: (root.height - 360px) / 2;
+        width: 360px;
+        height: 524px;
+        close-on-click: false;
+
+        DatePicker {
+            canceled => {
+                date-picker.close();
+            }
+
+            accepted(date) => {
+                debug(date);
+                date-picker.close();
+            }
+        }      
+    }
 }

internal/compiler/widgets/common/datepicker_base.slint

@@ -0,0 +1,22 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
+
+export struct Date {
+    year: int,
+    month: int,
+    day: int,
+}
+
+export component DatePickerBase {
+    in property <Date> date;
+
+    property <Date> current-date;
+
+    pure public function ok-enabled() -> bool {
+        true
+    }
+
+    public function get-current-date() -> Date {
+        root.current-date
+    }
+}

internal/compiler/widgets/cosmic-base/datepicker.slint

@@ -0,0 +1,61 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
+
+import { VerticalBox } from "./layouts.slint";
+import { Button } from "./button.slint";
+import { CosmicPalette, CosmicFontSettings, Icons } from "styling.slint";
+import { MenuBorder } from "./components.slint";
+
+import { Date, DatePickerBase } from "../common/datepicker_base.slint";
+export { Date } 
+
+export component DatePicker {
+    in property <string> title: "Select date";
+    in property <string> cancel-text: "Cancel";
+    in property <string> ok-text: "Ok";
+    in property <Date> date <=> base.date;
+
+    callback canceled();
+    callback accepted(/* current-date */ Date);
+
+    min-width: content-layer.min-width;
+    min-height: content-layer.min-height;
+    
+    background-layer := MenuBorder { }
+
+    content-layer := VerticalBox {        
+        Text {
+            text: root.title;
+            horizontal-alignment: left;
+            overflow: elide;
+            font-size: CosmicFontSettings.body.font-size;
+            font-weight: CosmicFontSettings.body.font-weight;
+            color: CosmicPalette.foreground;
+        }
+
+        base := DatePickerBase {}
+
+        HorizontalLayout {
+            spacing: 8px;
+        
+            Rectangle { }
+
+            Button {
+                text: root.cancel-text;
+
+                clicked => {
+                    root.canceled();
+                }
+            }
+
+            Button {
+                text: root.ok-text;
+                enabled: base.ok-enabled();
+
+                clicked => {
+                    root.accepted(base.get-current-date());
+                }
+            }
+        }
+    }
+}

internal/compiler/widgets/cosmic-base/std-widgets-base.slint

@@ -49,6 +49,9 @@ export { TextEdit }
 import { TimePicker, Time } from "time-picker.slint";
 export { TimePicker, Time }
 
+import { DatePicker, Date } from "datepicker.slint";
+export { DatePicker, Date }
+
 export { StyleMetrics, ScrollView, Button, StandardButton, AboutSlint, Palette }
 
 export * from "tableview.slint";

internal/compiler/widgets/cupertino-base/datepicker.slint

@@ -0,0 +1,61 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
+
+import { VerticalBox } from "./layouts.slint";
+import { Button } from "./button.slint";
+import { CupertinoPalette, CupertinoFontSettings, Icons } from "styling.slint";
+import { MenuBorder } from "./components.slint";
+
+import { Date, DatePickerBase } from "../common/datepicker_base.slint";
+export { Date } 
+
+export component DatePicker {
+    in property <string> title: "Select date";
+    in property <string> cancel-text: "Cancel";
+    in property <string> ok-text: "Ok";
+    in property <Date> date <=> base.date;
+
+    callback canceled();
+    callback accepted(/* current-date */ Date);
+
+    min-width: content-layer.min-width;
+    min-height: content-layer.min-height;
+
+    background-layer := MenuBorder { }
+
+    content-layer := VerticalBox {        
+        Text { 
+            text: root.title;
+            horizontal-alignment: left;
+            overflow: elide;
+            font-size: CupertinoFontSettings.body.font-size;
+            font-weight: CupertinoFontSettings.body.font-weight;
+            color: CupertinoPalette.foreground;
+        }
+
+        base := DatePickerBase {}
+
+        HorizontalLayout {
+            spacing: 8px;
+        
+            Rectangle { }
+
+            Button {
+                text: root.cancel-text;
+
+                clicked => {
+                    root.canceled();
+                }
+            }
+
+            Button {
+                text: root.ok-text;
+                enabled: base.ok-enabled();
+
+                clicked => {
+                    root.accepted(base.get-current-date());
+                }
+            }
+        }
+    }
+}

internal/compiler/widgets/cupertino-base/std-widgets-base.slint

@@ -49,6 +49,9 @@ export { TextEdit }
 import { TimePicker, Time } from "time-picker.slint";
 export { TimePicker, Time }
 
+import { DatePicker, Date } from "./datepicker.slint";
+export { DatePicker, Date }
+
 export { StyleMetrics, ScrollView, Button, StandardButton, AboutSlint, Palette }
 
 export * from "tableview.slint";

internal/compiler/widgets/fluent-base/datepicker.slint

@@ -0,0 +1,61 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
+
+import { VerticalBox } from "./layouts.slint";
+import { Button } from "./button.slint";
+import { FluentPalette, FluentFontSettings, Icons } from "styling.slint";
+import { MenuBorder } from "./components.slint";
+
+import { Date, DatePickerBase } from "../common/datepicker_base.slint";
+export { Date } 
+
+export component DatePicker {
+    in property <string> title: "Select date";
+    in property <string> cancel-text: "Cancel";
+    in property <string> ok-text: "Ok";
+    in property <Date> date <=> base.date;
+
+    callback canceled();
+    callback accepted(/* current-date */ Date);
+
+    min-width: content-layer.min-width;
+    min-height: content-layer.min-height;
+    
+    background-layer := MenuBorder { }
+
+    content-layer := VerticalBox {        
+        Text {
+            text: root.title;
+            horizontal-alignment: left;
+            overflow: elide;
+            font-size: FluentFontSettings.body.font-size;
+            font-weight: FluentFontSettings.body.font-weight;
+            color: FluentPalette.foreground;
+        }
+
+        base := DatePickerBase {}
+
+        HorizontalLayout {
+            spacing: 8px;
+        
+            Rectangle { }
+
+            Button {
+                text: root.cancel-text;
+
+                clicked => {
+                    root.canceled();
+                }
+            }
+
+            Button {
+                text: root.ok-text;
+                enabled: base.ok-enabled();
+
+                clicked => {
+                    root.accepted(base.get-current-date());
+                }
+            }
+        }
+    }
+}

internal/compiler/widgets/fluent-base/std-widgets-base.slint

@@ -49,6 +49,9 @@ export { TextEdit }
 import { TimePicker, Time } from "time-picker.slint";
 export { TimePicker, Time }
 
+import { DatePicker, Date } from "datepicker.slint";
+export { DatePicker, Date }
+
 export { StyleMetrics, ScrollView, Button, StandardButton, AboutSlint, Palette }
 
 export * from "tableview.slint";

internal/compiler/widgets/material-base/datepicker.slint

@@ -0,0 +1,63 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
+
+import { VerticalBox } from "./layouts.slint";
+import { Button } from "./button.slint";
+import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";
+
+import { Date, DatePickerBase } from "../common/datepicker_base.slint";
+export { Date } 
+
+export component DatePicker {
+    in property <string> title: "Select date";
+    in property <string> cancel-text: "Cancel";
+    in property <string> ok-text: "Ok";
+    in property <Date> date <=> base.date;
+
+    callback canceled();
+    callback accepted(/* current-date */ Date);
+
+    min-width: content-layer.min-width;
+    min-height: content-layer.min-height;
+
+    background-layer := Rectangle {
+        background: MaterialPalette.surface-container-high;
+        border-radius: 28px;
+    }
+
+    content-layer := VerticalBox {        
+        Text { 
+            text: root.title;
+            horizontal-alignment: left;
+            overflow: elide;
+            font-size: MaterialFontSettings.label-medium.font-size;
+            font-weight: MaterialFontSettings.label-medium.font-weight;
+            color: MaterialPalette.foreground;
+        }
+
+        base := DatePickerBase {}
+
+        HorizontalLayout {
+            spacing: 8px;
+        
+            Rectangle { }
+
+            Button {
+                text: root.cancel-text;
+
+                clicked => {
+                    root.canceled();
+                }
+            }
+
+            Button {
+                text: root.ok-text;
+                enabled: base.ok-enabled();
+
+                clicked => {
+                    root.accepted(base.get-current-date());
+                }
+            }
+        }
+    }
+}

internal/compiler/widgets/material-base/std-widgets-base.slint

@@ -30,3 +30,6 @@ export { TextEdit }
 
 import { TimePicker, Time } from "time-picker.slint";
 export { TimePicker, Time }
+
+import { DatePicker, Date } from "./datepicker.slint";
+export { DatePicker, Date }

internal/compiler/widgets/qt/datepicker.slint

@@ -0,0 +1,63 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
+
+import { VerticalBox } from "./layouts.slint";
+import { Button } from "./button.slint";
+import { Palette } from "./std-widgets-impl.slint";
+
+import { Date, DatePickerBase } from "../common/datepicker_base.slint";
+export { Date } 
+
+export component DatePicker {
+    in property <string> title: "Select date";
+    in property <string> cancel-text: "Cancel";
+    in property <string> ok-text: "Ok";
+    in property <Date> date <=> base.date;
+
+    callback canceled();
+    callback accepted(/* current-date */ Date);
+
+    min-width: content-layer.min-width;
+    min-height: content-layer.min-height;
+
+    background-layer := Rectangle {
+        border-radius: 8px;
+        background: Palette.control-background;
+    }
+
+    content-layer := VerticalBox {
+        spacing: 8px;
+
+        Text {
+            text: root.title;
+            horizontal-alignment: left;
+            overflow: elide;
+            color: Palette.foreground;
+        }
+   
+        base := DatePickerBase {}
+
+        HorizontalLayout {
+            spacing: 8px;
+        
+            Rectangle { }
+
+            Button {
+                text: root.cancel-text;
+
+                clicked => {
+                    root.canceled();
+                }
+            }
+
+            Button {
+                text: root.ok-text;
+                enabled: base.ok-enabled();
+
+                clicked => {
+                    root.accepted(base.get-current-date());
+                }
+            }
+        }
+    }
+}

internal/compiler/widgets/qt/std-widgets.slint

@@ -50,3 +50,6 @@ export { StandardListView, ListView }
 
 import { TextEdit } from "textedit.slint";
 export { TextEdit }
+
+import { DatePicker, Date } from "./datepicker.slint";
+export { DatePicker, Date }

tests/cases/widgets/datepicker.slint

@@ -0,0 +1,31 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
+
+import { DatePicker, Date, Button } from "std-widgets.slint";
+export { Date }
+
+export component TestCase inherits Window {
+    width: 600px;
+    height: 600px;
+
+    date-picker := datePicker {
+        x: 0;
+        y: 0;
+    }
+
+    in property <Date> date <=> date-picker.date;
+}
+
+/*
+
+```rust
+use i_slint_backend_testing::mock_elapsed_time;
+
+let instance = TestCase::new().unwrap();
+
+instance.set_time(Date{ day: 17, month: 5, year: 2024});
+
+mock_elapsed_time(500);
+
+
+*/