Format date picker

Question

I have a date picker in my application scene and would like to format it.

So far I was able to adjust the font size of the date picker.

DatePicker.css:

.datepicker {
    -fx-font-size: 12px
}

How for example can I change the border of the today date or the background of the hovered date? I tried .datepicker:hover , but this doesn't seem to do anything.

Answer 1

The following almost works:

.date-cell:hover {
  -fx-background-color: yellow ;
  /* etc */
}

I say "almost" because it doesn't work the first time the date picker's popup is shown, only on subsequent showings. That's a bug, which you should file at https://javafx-jira.kenai.com .

I can't figure a workaround off the top of my head, but will try later...

You can format the cell showing the selected date with

.date-cell:focused {
  /* ... */
}

and the field showing the selected date with

.date-picker .text-field {
    /* ... */
}

Answer 2

You will not be able to achieve this by directly using style's on the datepicker and I am not sure whether you have access to datecell directly via css , but it must exist !

So you can try something like this,

.date-cell:hover{
        //your style
 }

Hint : You can look in modena.css of javafx8 for it.

Consider it as a hack, you can override the Day Cell Factory of date picker

final Callback<DatePicker, DateCell> dayCellFactory = 
        new Callback<DatePicker, DateCell>() {
            @Override
            public DateCell call(final DatePicker datePicker) {
                return new DateCell() {
                    @Override
                    public void updateItem(LocalDate item, boolean empty) {
                        super.updateItem(item, empty);

                        if (//day is today) {
                             setStyle(" -fx-border-color:black, 
                                              -fx-border-style:solid,
                                                          -fx-border-width:1px");
                        }   
                 }
          };
    }
};
checkOutDatePicker.setDayCellFactory(dayCellFactory);

A complete example can be found here