DatePickerPopup

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

import { DatePickerPopup, Button } from "std-widgets.slint";
export component Example inherits Window {
    width: 400px;
    height: 600px;

    date-picker-button := Button {
        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

Date

Defines a date with day, month, and year.

• day(int): The day value (range from 1 to 31).
• month(int): The month value (range from 1 to 12).
• year(int): The year value.

Set the initial displayed date.

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

slint

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