TimePicker widget

[FloVanGH]

This task is part of #46 (Initial Android support).

Base requirements

• provided as dedicated widget that can be used inside of a component or a PopupWindow
• provided also as ready to use component already wrapped in a Dialog /PopupWindow
• clear and easy to use api / model
• localizable
• provided in all styles (main priority material style)

References

• TimePicker Material Design 3: https://m3.material.io/components/time-pickers/overview

[FloVanGH]

API draft

This is the collection of some ideas how the TimePicker could looks like from API side and should be used as base for discussions.

export component TimePicker {
      in-out property <date-time> current-time;
      in property <string> local: "en_US";
}

Use as component and inside of a PopupWindow

import { Button, TimePicker } from "std-widgets.slint";

export component MainWindow inherits Window {
      width: 600px;
      height: 400px;
      
      time-picker-popup := PopupWindow {
          width: 200px;
          height: 200px;
          
          TimePicker {}
      }
      
      VerticalLayout {
          time-picker := TimePicker {}
          Text {
              text: time-picker.current-time;
          }
          
          Button {
                text: "Open TimePicker Popup";
                clicked => {
                    time-picker-popup.show();
                }
          }
      }
      
}

Ready to use dialog

export component TimePickerPopup {
      in-out property <date-time> current-time;
      in property <string> local: "en_US";
      
      public function show() -> date-time {
            //...
      }
}

import { TimePickerPopup } from "std-widgets.slint";

export component MainWindow inherits Window {
      width: 600px;
      height: 400px;
      
      time-picker-popup := TimePickerPopup {
            width: 200px;
            height: 200px;
      }
      
        Button {
                text: "Open TimePicker Popup";
                clicked => {
                    debug(time-picker-popup.show());
                }
          }
}

Use with LineEdit

The idea is that if input-type of LineEdit is set and it gets focus a time picker popup open automatically. As alternative a more explicit method that give more flexibility when the popup should be open could be possible.

import { LineEdit } from "std-widgets.slint";

export component MainWindow inherits Window {
      width: 600px;
      height: 400px;
      
      LineEdit {
            input-type:  InputType.time;
      }
}

[WilstonOreo]

Regarding the date-time type, I added a separate issue to track this: #5122