在JavaFX的日期选择器Skin中高亮显示多个日期。

Question

我正在尝试创建一个小型应用程序，允许用户执行以下操作：

在格式为dd/mm/yyyy的文本框中输入日期。
点击一个按钮。
显示所选日期，并在同一个日期选择器皮肤上高亮显示该日期及前五天。

我了解到需要使用单元格工厂(cell factory)，并且在StackOverflow和其他网站上找到了多种实现方式，但似乎没有一种在我的情况下工作，因此我提出了这个问题。我看到了实现目标的不同方法，有的使用数组，有的不使用，我选择发布这个看起来更优雅的实现。

我不明白是我的代码没有工作，还是出于某种原因无法覆盖默认主题。

我还遇到了另一个问题：如果不设置dayCellFactory，用户可以一次输入多个日期，按钮也能正常工作；但是一旦设置了dayCellFactory，按钮就只能工作一次，我该如何解决这个问题呢？

我的按钮逻辑如下：

calculate_button.setOnAction(actionEvent -> {
    // 获取用户输入的字符串
    String user_date = textField_start_of_period.getText();
    // 检查用户输入是否为dd/mm/yyyy格式
    String regex_check = "[0-9]{2}\/[0-9]{2}\/[0-9]{4}";
    if (user_date.matches(regex_check)) {
        // 将字符串转换为日期
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
        LocalDate localDate = LocalDate.parse(user_date, formatter);

        // 设置输入的日期并加13天作为基准
        today.setValue(localDate.plusDays(13));

        // 要高亮显示的日期列表
        List highlight_days = new ArrayList<>();
        highlight_days.add(today.getValue().minusDays(5)); 
        highlight_days.add(today.getValue().minusDays(4)); 
        highlight_days.add(today.getValue().minusDays(3)); 

        // 高亮显示特定日期
        today.setDayCellFactory(param -> {
            return new DateCell() {
                @Override
                public void updateItem(LocalDate item, boolean empty) {
                    super.updateItem(item, empty);
                    if (!empty && item != null && highlight_days.contains(item)) {
                        this.setStyle("-fx-background-color: pink");
                    }
                }
            };
        });

    } else {
        textField_start_of_period.setText("错误");
    }
});

我已经尝试了在数组中更改不同的日期表示形式，也尝试直接设置dayCellFactory，但都没有成功。我也尝试通过CSS样式来覆盖，但似乎默认样式仍然占据了主导地位。

我的DatePicker today是在用户打开应用时显示当前日期（LocalDate.now），并在用户点击按钮后重用。为了展示DatePickerSkin，我必须以特定的方式初始化它，因为默认情况下它只显示一天。我希望在不影响用户体验的前提下解决这些问题。

对于任何帮助，我都将非常感激。

Lukas Eder · Answer

我不太明白修改皮肤的意义何在。实际上并无此必要。

如果我正确理解了你的需求，你想要实现的是：在日期选择器中，将选中日期之前的日子以不同颜色显示。你的确可以在DateCell中做到这一点，但需要额外做一个步骤：每当所选日期发生变化时，必须通知DatePicker重新渲染每一个日期单元格：

DatePicker picker = new DatePicker();
picker.setDayCellFactory(p -> new PrecedingDaysDateCell(p));
picker.valueProperty().addListener((o) -> Platform.runLater(() -> {
    picker.setDayCellFactory(null);
    picker.setDayCellFactory(p -> new PrecedingDaysDateCell(p));
}));

上述代码会在DatePicker的value属性发生变化时，先将细胞工厂设为null（即默认状态），然后再设置回渲染前几日为粉色的细胞工厂，从而强制重新渲染每个日期单元格。这种方法虽显笨拙，但十分有效。

（使用Platform.runLater是因为在DatePicker仍在处理值变化期间更改细胞工厂可能导致内部不一致，进而引发异常。）

以下代码示例在我这里运行良好，能满足所有情况：

import java.time.LocalDate;
import java.time.temporal.ChronoUnit;
import java.util.Objects;

import javafx.application.Platform;
import javafx.scene.control.DatePicker;
import javafx.scene.control.DateCell;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.paint.Color;

// 仅为App类使用
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;

public class PrecedingDaysDateCell extends DateCell {
    // ... （代码与上述示例相同，未重复粘贴）
}

public static class App extends Application {
    public void start(Stage stage) {
        DatePicker picker = new DatePicker();
        picker.setDayCellFactory(p -> new PrecedingDaysDateCell(p));
        // ... （监听和更新逻辑同上，未重复粘贴）

        BorderPane pane = new BorderPane(picker);
        pane.setPadding(new Insets(60));

        Scene scene = new Scene(pane);
        stage.setScene(scene);
        stage.setTitle("显示前几日的日期选择器");
        stage.show();
    }

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

Brigand · Answer

您似乎在这里寻找两种完全不同的功能。首先，您希望在 DatePicker 中突出显示选定日期之前的五天；其次，您想将 DatePicker 使用的内部日历作为单独的控件来使用。此答案主要解决第一点问题（同时对第二点给出一点提示，但并未进行实际测试）。

此方法采用自定义 CSS 伪类来表示高亮状态。style.css 文件内容很简单：

.date-cell:fertile {
    -fx-background-color: pink;
}

日期选择器的单元格只需根据单元格代表的日期相对于所选日期（即 value）是否在合适的范围内来设置伪类状态。这意味着如果单元格代表的日期改变（这可以通过 updateItem(...) 方法常规方式完成）或所选项目改变（这可以通过监听器完成）时，都需更新此伪类状态。下面是一个基本的实现示例：

import javafx.application.Application;
import javafx.css.PseudoClass;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.DateCell;
import javafx.scene.control.DatePicker;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.time.LocalDate;
import java.time.temporal.ChronoUnit;

public class App extends Application {
    @Override
    public void start(Stage stage) {
        DatePicker picker = new DatePicker();
        final int precedingDays = 5;
        picker.setDayCellFactory(p -> new DateCell() {
            PseudoClass fertile = PseudoClass.getPseudoClass("fertile");
            {
                picker.valueProperty().addListener((obs) -> updateStyle(getItem()));
            }
            @Override
            public void updateItem(LocalDate date, boolean empty) {
                super.updateItem(date, empty);
                updateStyle(date);
            }

            private void updateStyle(LocalDate date) {
                LocalDate selected = picker.getValue();
                if (date == null || selected == null) {
                    pseudoClassStateChanged(fertile, false);
                } else {
                    long days = ChronoUnit.DAYS.between(date, selected);
                    pseudoClassStateChanged(fertile, days > 0 && days < precedingDays);
                }
            }
        });

        BorderPane pane = new BorderPane(picker);
        pane.setPadding(new Insets(60));

        Scene scene = new Scene(pane);
        stage.setScene(scene);
        scene.getStylesheets().add(App.class.getResource("style.css").toExternalForm());
        stage.setTitle("突出显示前五天的日期选择器");
        stage.show();
    }

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

对于始终作为弹出窗口显示日历的需求，您可以尝试用以下代码替换原有的布局设置：

// 原始代码
// BorderPane root = new BorderPane(picker);

// 替换为以下代码
DatePickerSkin skin = new DatePickerSkin(picker);
BorderPane pane = new BorderPane(skin.getPopupContent());

但请注意，据我所知，这不是 API 支持的官方使用方式，可能在某些场景下存在兼容性风险。