Hide Calendar Button on DatePicker?

Question

Is there a simple way to hide the calendar button on the DatePicker Node in JavaFX? Some of our dates are not editable, and the calendar button is just adding to the width of the field.

Answer 1

You can use the following css to remove the calendar button

.date-picker > .arrow-button {
    -fx-padding: 0px;
}

.date-picker > .arrow-button > .arrow {
    -fx-padding: 0px;
}

Edit - To get back the right border :

.date-picker > .date-picker-display-node {
    -fx-background-insets: 1 1 1 1;
}

---

Edit - To apply the above style to only few datepickers

Declare a DatePicker and add a styleclass to it.

DatePicker nonEditableDatePicker = new DatePicker();
nonEditableDatePicker.getStyleClass().add("non-editable-datepicker");

Use this styleclass to add styles :

.non-editable-datepicker > .arrow-button {
    -fx-padding: 0px;
}

.non-editable-datepicker > .arrow-button > .arrow {
    -fx-padding: 0px;
}

.non-editable-datepicker > .date-picker-display-node {
    -fx-background-insets: 1 1 1 1;
}