JavaFx DatePicker单色单元格

Question

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

我仍然在学习如何使用JavaFX，因此请保持宽容。

问候 基督教Taeumel

Answer 1

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

---

虽然上述证明代码的简单的背景风格设置在大多数情况下正常工作，它会可能最好在更新方法中根据需要添加和删除样式类，而不是可怕的设置样式（以便可以在CSS中自定义样式）。这样做可以更容易地定制单元格的各种潜在状态的风格（例如，选定或聚焦等）。

定制各种细胞伪国进行充分的CSS规则（例如：选择：悬停，：重点等），可在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; 
}