dioxus_element_plug/components/
date_picker.rs

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

dioxus_element_plug/components/
date_picker.rs
