JavaFx DatePicker颜色单个单元格 [英] JavaFx DatePicker color single cell

问题描述

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

Good evening everyone, I want to change the color of a special cell in the DatePicker of JavaFX. My aim is to change the color of the cell: 30th Jan. 2017.

我仍在学习如何使用JavaFX，请不要使用。

I'm still learning how to use JavaFX so please be forbearing.

最诚挚的问候
Christian Taeumel

Best regards Christian Taeumel

推荐答案

使用< a href = https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/DatePicker.html#dayCellFactoryProperty rel = nofollow noreferrer> DateCellFactory ：

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);
    }
}

---

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

---

While the simple background style setting in code demonstrated above works fine in most cases, it would probably best to add and remove style classes as appropriate in the update method, rather than directly setting styles (so that the styles could be customized in CSS). Doing this would make it easier to customize the style of various potential states of the cell (e.g. selected or focused, etc).

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

Full CSS rules for customizing the various cell pseudo-states (e.g. :selected, :hover, :focused, etc.) can be found in modena.css which will be included in your JavaFX distribution (for JavaFX 8 it is inside jfxrt.jar). A selection from a Java 9 distribution is shown below. As you can see there is quite a bit of customization you can do in CSS and the potential combination of different states can make it a little tricky to correctly customize all of them:

.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颜色单个单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！