dioxus_element_plug/components/
time_picker.rs1use dioxus::prelude::*;
2
3#[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#[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}