javacssjavafxjavafx-8javafx-css

Is there a way to make a Datepicker round? (JavaFX)

I've been trying to customize with css my JavaFX application...so far so good untill I reach the Datepicker... I tried a lot of different aproaches but none of them seem to work. Is there a way to make the Datepicker round just like my TextFields?

Actual JavaFX interface that I'm working on: Actual JavaFX interface that I'm working on

(btw, I'm using Java 8_111 with Netbeans 8.2 if that helps on something)

Greetings!

Solution

  • You just need to individually set the background-radius for the date-picker itself, plus it's underlying text-field and arrow-button (which is the calendar button).

    For example, using the following CSS:

    .date-picker {
    -fx-background-radius: 10 10 10 10;
}
.date-picker > .text-field {
    -fx-background-radius: 10 0 0 10;
}

.date-picker > .arrow-button {
    -fx-background-radius: 0 10 10 0;
}

    Produces this DatePicker:

    screenshot

    For future CSS styling needs, you can learn a lot by referencing the default modena.css stylesheet used internally by JavaFX. This is valuable for learning many of the additional selectors available which aren't described in the "official" CSS Reference Guide.