Added TimePicker widget

[FloVanGH]

Fixes #5087

[develcooking]

Hi there,

I'm not an expert in in Slint, but I wanted to give the proposed widget a try. I implemented it into my project, and I'm pleased to say that it works very well. Great job, @FloVanGH!

I have a question regarding the use of the selected time in programming languages like Rust, C++, or JavaScript. For instance, with a line edit, you would typically use a callback with a string and react to it in Rust with something like ui.on_lineeditoutput(do-the-code-stuff).

How should "Time" be used as a callback in this context?

Thank you in advance for your help!

[FloVanGH]

Hi there,

I'm not an expert in in Slint, but I wanted to give the proposed widget a try. I implemented it into my project, and I'm pleased to say that it works very well. Great job, @FloVanGH!

I have a question regarding the use of the selected time in programming languages like Rust, C++, or JavaScript. For instance, with a line edit, you would typically use a callback with a string and react to it in Rust with something like ui.on_lineeditoutput(do-the-code-stuff).

How should "Time" be used as a callback in this context?

Thank you in advance for your help!

Hi @develcooking ,

thank you :-).

Here some example code that hopefully helps you:

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

export component AppWindow inherits Window {
    in-out property <Time> current-time;
    
    callback update-current-time(Time);
    pure callback time-to-string(Time) -> string;
    
    width: 600px;
    height: 400px;
    
    HorizontalLayout {
        time-label := Text {
             text: root.time-to-string(root.current-time);
        }
        Button {
              text: "Open TP";
             clicked => {
                   time-picker.show();
             }
        }
    }
    
    time-picker := PopupWindow {
        x: (root.width - 340px) / 2;
        y: (root.height - 500px) / 2;
        width: 340px;
        height: 500px;
        
          TimePicker {
            time: root.current-time;
            twenty-four-hour: true;
            canceled => {
                time-picker.close();
            }

            accepted(time) => {
                root.current-time = time;
                time-picker.close();
            }
        }
    }
}

slint::include_modules!();
use slint::*;

pub fn main() {
     let app_window = AppWindow::new().unwrap();
     
     main_window.on_time_to_string(|time: Time| {
            SharedString::from(/* use e.g. the chrono crate to get the time as string*/) 
     });
     
     app_window.run().unwrap();
}

That is just a small example. There is an ongoing work on property changed callbacks. After it is official released it can helps you to e.g. check if focus on LineEdit is changed to true and open then the time picker popup. The callbacks are already implemented, but you have to use the SLINT_EXPERIMENTAL flag to use it, because it is not completely finished.

[tronical]

Looks overall good to me, the API is tidy. My main issue is the 24-hour format selection.

[tronical]

Web browsers use the system default for <input type="time"> with regards to 12-hour format vs. 24-hour format. I think we should do the same.

If we can't determine the system default, I think we should default to 24-hours.

We could offer an optional API to override that, and then I'd call it in property <bool> use-24-hour-format: true; (note the default).

In reality, I'd use in property <bool> use-24-hour-format: SlintInternals.system-time-24-hour-format; and default to true there.

The documentation should explain what the default is here.

[FloVanGH]

It's ok for me.