DateCell not changing, after applying "selected" Style

Question

I have a DatePicker and add this Listener.

datePicker.showingProperty().addListener((observable, oldValue, showing) -> {
        if(showing) {
            //Get the content
            DatePickerContent content = (DatePickerContent)((DatePickerSkin)datePicker.getSkin()).getPopupContent();
            content.lookupAll(".day-cell").forEach(cell -> { 
                cell.getStyleClass().add("selected");
                System.out.println(cell.getStyleClass() + " Day: " + ((DateCell) cell).getItem());
            });
        }
    });

But after showing the DatePicker and selecting a date, only one cell is shown as being selected.

Even tough the styles printed out in the console all have "selected", but what keeps me wondering, that the Cell which is really selected has 2 "selected" styles. This is Console output (part of it):

cell date-cell day-cell selected Day: 2017-07-11
cell date-cell day-cell selected Day: 2017-07-12
cell date-cell day-cell selected selected Day: 2017-07-13
cell date-cell day-cell selected Day: 2017-07-14
cell date-cell day-cell selected Day: 2017-07-15

So why is only one Cell being displayed as selected?

Answer 1

Don't add a listener to the property, just set datePicker.onShown.

//Get the content
datePicker.onShown(e -> {
        DatePickerContent content = (DatePickerContent)((DatePickerSkin)datePicker.getSkin()).getPopupContent();
        content.lookupAll(".day-cell").forEach(cell -> { 
            cell.getStyleClass().add("selected");
        });
}