Skip to main content

dioxus_element_plug/components/
time_picker.rs

1use dioxus::prelude::*;
2
3/// TimePicker props
4#[derive(Props, Clone, PartialEq)]
5pub struct TimePickerProps {
6    #[props(default)]
7    pub model_value: Option<String>,
8
9    #[props(default = "Select Time".to_string())]
10    pub placeholder: String,
11
12    #[props(default = "HH:mm:ss".to_string())]
13    pub format: String,
14
15    #[props(default = false)]
16    pub disabled: bool,
17
18    #[props(default = false)]
19    pub clearable: bool,
20
21    #[props(default = false)]
22    pub is_range: bool,
23
24    #[props(default)]
25    pub on_change: Option<EventHandler<String>>,
26
27    #[props(default)]
28    pub class: Option<String>,
29
30    #[props(default)]
31    pub style: Option<String>,
32}
33
34/// TimePicker component for time selection
35#[component]
36pub fn TimePicker(props: TimePickerProps) -> Element {
37    let mut class_names = vec!["el-date-editor".to_string(), "el-time-editor".to_string()];
38    if props.disabled { class_names.push("is-disabled".to_string()); }
39    if let Some(ref c) = props.class { class_names.push(c.clone()); }
40
41    rsx! {
42        div {
43            class: "{class_names.join(\" \")}",
44            style: props.style.clone().unwrap_or_default(),
45            div {
46                class: "el-input",
47                input {
48                    class: "el-input__inner",
49                    r#type: "text",
50                    placeholder: "{props.placeholder}",
51                    value: props.model_value.clone().unwrap_or_default(),
52                    disabled: props.disabled,
53                    readonly: true,
54                }
55                span {
56                    class: "el-input__prefix",
57                    i { class: "el-icon-time" }
58                }
59            }
60        }
61    }
62}