Question

大家晚上好，我想更改JavaFX的DatePicker中特殊单元格的颜色。我的目标是改变细胞的颜色：2017年1月30日。

我还在学习如何使用JavaFX，所以请宽容。

祝你好运 Christian Taeumel

Answer 1

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.stage.Stage;
import javafx.util.Callback;

import java.time.LocalDate;
import java.time.MonthDay;

public class ColoredPick extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        final Callback<DatePicker, DateCell> dayCellFactory = new Callback<DatePicker, DateCell>() {
            public DateCell call(final DatePicker datePicker) {
                return new DateCell() {
                    @Override public void updateItem(LocalDate item, boolean empty) {
                        super.updateItem(item, empty);

                        if (MonthDay.from(item).equals(MonthDay.of(3, 15)) &&
                            !(getStyleClass().contains("next-month") || getStyleClass().contains("previous-month"))
                            ) {
                            setTooltip(new Tooltip("Beware the Ides of March!"));
                            setStyle("-fx-background-color: #ff4444;");
                        } else {
                            setTooltip(null);
                            setStyle(null);
                        }
                    }
                };
            }
        };

        DatePicker picker = new DatePicker();
        picker.setDayCellFactory(dayCellFactory);

        stage.setScene(new Scene(picker));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

虽然上面演示的代码中的简单背景样式设置在大多数情况下都可以正常工作，但最好在更新方法中适当添加和删除样式类，而不是直接设置样式（以便可以在CSS）。这样做可以更容易地定制单元格的各种潜在状态（例如选择或聚焦等）。

用于自定义各种单元伪状态的完整CSS规则（例如：selected，：hover，：focused等）可以在modena.css中找到，它将包含在JavaFX发行版中（对于JavaFX 8它在jfxrt.jar）内。 Java 9发行版的选择如下所示。正如您所看到的，您可以在CSS中进行相当多的自定义，并且不同状态的潜在组合可能会使正确自定义所有这些变得有点棘手：

.date-picker-popup > * > .date-cell {
    -fx-background-color: transparent;
    -fx-background-insets: 1, 2;
    -fx-padding: 0;
    -fx-alignment: BASELINE_CENTER;
    -fx-opacity: 1.0;
}
.date-picker-popup > * > .day-name-cell,
.date-picker-popup > * > .week-number-cell {
    -fx-font-size: 0.916667em;
}
.date-picker-popup > * > .week-number-cell {
    -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
    -fx-border-color: -fx-control-inner-background;
    -fx-border-width: 1px;
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-background;
    -fx-text-fill: -fx-accent;
}
.date-picker-popup > * > .day-cell {
    -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
    -fx-border-color: derive(-fx-selection-bar-non-focused, 60%);
    -fx-border-width: 1px;
    -fx-font-size: 1em;
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-background;
    -fx-text-fill: -fx-text-background-color;
}
.date-picker-popup > * > .hijrah-day-cell {
    -fx-alignment: TOP_LEFT;
    -fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */
    -fx-cell-size: 2.75em;
}
.date-picker-popup > * > .day-cell > .secondary-text {
    -fx-fill: #f3622d;
}
.date-picker-popup > * > .today {
    -fx-background-color: -fx-control-inner-background, derive(-fx-selection-bar-non-focused, -20%), -fx-control-inner-background;
    -fx-background-insets: 1, 2, 3;
}
.date-picker-popup > * > .day-cell:hover,
.date-picker-popup > * > .selected,
.date-picker-popup > * > .previous-month.selected,
.date-picker-popup > * > .next-month.selected {
    -fx-background: -fx-selection-bar;
}
.date-picker-popup > * > .previous-month:hover,
.date-picker-popup > * > .next-month:hover {
    -fx-background: -fx-selection-bar-non-focused;
}
.date-picker-popup > * > .today:hover,
.date-picker-popup > * > .today.selected {
    -fx-background-color: -fx-selection-bar, derive(-fx-selection-bar-non-focused, -20%),-fx-selection-bar;
}
.date-picker-popup > * > .day-cell:focused,
.date-picker-popup > * > .today:focused {
    -fx-background-color: -fx-control-inner-background, -fx-cell-focus-inner-border, -fx-control-inner-background;
    -fx-background-insets: 1, 2, 3;
}
.date-picker-popup > * > .day-cell:focused:hover,
.date-picker-popup > * > .today:focused:hover,
.date-picker-popup > * > .selected:focused,
.date-picker-popup > * > .today.selected:focused {
    -fx-background-color: -fx-selection-bar, -fx-cell-focus-inner-border, -fx-selection-bar;
}
.date-picker-popup > * > .previous-month,
.date-picker-popup > * > .next-month {
    -fx-background: derive(-fx-control-inner-background, -4%);
}
.date-picker-popup > * > .day-cell:hover > .secondary-text,
.date-picker-popup > * > .previous-month > .secondary-text,
.date-picker-popup > * > .next-month > .secondary-text,
.date-picker-popup > * > .selected > .secondary-text {
    -fx-fill: -fx-text-background-color;
}
.date-picker-popup > * > .previous-month.today,
.date-picker-popup > * > .next-month.today {
    -fx-background-color: derive(-fx-control-inner-background, -4%), derive(-fx-selection-bar-non-focused, -20%), derive(-fx-control-inner-background, -4%);
}

.date-picker-popup > * > .previous-month.today:hover,
.date-picker-popup > * > .next-month.today:hover {
    -fx-background-color: -fx-selection-bar-non-focused, derive(-fx-selection-bar-non-focused, -20%), -fx-selection-bar-non-focused;
}

JavaFx DatePicker颜色单个单元格

1 个答案: