DatePickerPopup

Use a date picker to let the user select a date.

import { DatePickerPopup, FilledButton } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 600px;

    date_picker_button := FilledButton {
        text: @tr("Open Date Picker");

        clicked => {
            date_picker.show();
        }
    }

    date_picker := DatePickerPopup {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height ) / 2;
        close_policy: PopupClosePolicy.no_auto_close;

        accepted(date) => {
            date_picker.close();
        }
        canceled => {
            date_picker.close();
        }
    }
}

slint

Properties

title

string default: ""

The text that is displayed at the top of the picker.

date

struct Date default: a struct with all default values

Set the initial displayed date.

DatePickerPopup {
    date: { year: 2024, month: 11 };
}

slint

close-policy

enum PopupClosePolicy default: close_on_click

By default, a DatePickerPopup closes when the user clicks. Set this to false to prevent that behavior and close it manually using the close() function.

Callbacks

canceled()

Invoked when the cancel button is clicked.

date_picker := DatePickerPopup {
    canceled() => {
        date_picker.close();
    }
}

slint

accepted(Date)

Invoked when the ok button is clicked.

date_picker := DatePickerPopup {
    accepted(date) => {
        debug("Selected date: ", date);
        date_picker.close();
    }
}

slint

Properties

has-focus

bool default: false

Whether the component has focus.

Functions

clear-focus()

Clears the focus from the component.

close()

Closes the popup. Use this if you set the close_policy property to no_auto_close.

focus()

Focuses the component.

show()

Show the popup on the screen.