slint/internal/compiler/widgets/qt/datepicker.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

import { VerticalBox } from "./layouts.slint";
import { Button } from "./button.slint";
import { Palette } from "./std-widgets-impl.slint";

import { Date, DatePickerBase } from "../common/datepicker_base.slint";
export { Date }

export component DatePicker {
    in property <string> title: "Select date";
    in property <string> cancel-text: "Cancel";
    in property <string> ok-text: "Ok";
    in property <Date> date <=> base.date;
    in property <string> input-title: "Enter date";
    in property <string> input-placeholder-text: "mm/dd/yyyy";
    in property <string> input-format: "%m/%d/%Y";

    property <brush> state: Palette.color-scheme == ColorScheme.dark ? #ffffff : #000000;
    property <brush> state-secondary: Palette.color-scheme == ColorScheme.dark ? #000000 : #ffffff;

    callback canceled();
    callback accepted(/* current-date */ Date);

    min-width: content-layer.min-width;
    min-height: content-layer.min-height;

    background-layer := Rectangle {
        border-radius: 8px;
        background: Palette.control-background;
    }

    content-layer := VerticalBox {
        spacing: 8px;
        padding-left: 0;
        padding-right: 0;

        base := DatePickerBase {
            title: root.title;
            input-title: root.input-title;
            input-placeholder-text: root.input-placeholder-text;
            input-format: root.input-format;
            style: {
                  border-brush: Palette.border,
                  padding: 8px,
                  calendar-style: {
                      spacing: 8px,
                      delegate-style: {
                          font-size: 14px,
                          font-weight: 500,
                          foreground: Palette.foreground,
                          state-brush: root.state,
                          background-selected: Palette.accent-background,
                          foreground-selected: Palette.accent-foreground,
                          state-brush-selected: root.state-secondary,
                          border-color-today: Palette.accent-background,
                          foreground-today: Palette.accent-background,
                          state-brush-today: root.state,
                      }
                  },
                  icon-button-style: {
                      foreground: Palette.foreground,
                      state-brush: root.state,
                      icon-size: 12px,
                  },
                  current-day-style: {
                      foreground: Palette.foreground,
                      font-weight: 300,
                      font-size: 28px,
                  },
                  title-style: {
                    font-size: 14px,
                    font-weight: 500,
                    foreground: Palette.foreground,
                  },
                  previous-icon: @image-url("./_arrow_back.svg"),
                  next-icon: @image-url("./_arrow_forward.svg"),
                  drop-down-icon: @image-url("./_dropdown.svg"),
                  input-icon: @image-url("./_edit.svg"),
                  calendar-icon: @image-url("./_calendar.svg"),
                  selection-button-style: {
                      foreground: Palette.foreground,
                      state-brush: root.state,
                      icon-size: 8px,
                      font-size: 14px,
                      font-weight: 500
                  }
            };
        }

        HorizontalLayout {
            spacing: 8px;
            padding-left: 8px;
            padding-right: 8px;

            Rectangle { }

            Button {
                text: root.cancel-text;

                clicked => {
                    root.canceled();
                }
            }

            Button {
                text: root.ok-text;
                enabled: base.ok-enabled();

                clicked => {
                    root.accepted(base.get-current-date());
                }
            }
        }
    }
}