java - JavaFX extract calendar-popup from DatePicker / only show popup

Question

I'm trying to build an CalendarView for an JavaFX application, to only display dates(no selecting required). Since the DatePicker class has a nice calendar popup I thought I might try to extract it so that I already have all the style-questions covered.

So is there an easy way to extract the DatePicker calendar popup and insert it into a new CalendarView?

I already looked at the show() method from the ComboBoxBase class to see what exactly happens when the popup is triggered but I have to admit I couldn't really get my head around it.

Alternatively I could think about simply edit the DatePicker in a way that only the popup shows all the time with the editor-TextField and button component always hiding, but again I couldn't quite figure out how to do that without hiding the popup as well. Also I would propably need to get the bounds of the popup to approptiately manage height and width in this alternativw, which again seems to be not that easy.

Answer 1

You can get the popup content of a DatePicker from a DatePickerSkin. See this demo for an implementation:

public class DatePickerPopupDemo extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root, 400, 400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

            DatePickerSkin datePickerSkin = new DatePickerSkin(new DatePicker(LocalDate.now()));
            Node popupContent = datePickerSkin.getPopupContent();

            root.setCenter(popupContent);

            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

---

If the top bar is not needed, you can look it up and hide it.

DatePickerSkin datePickerSkin = new DatePickerSkin(new DatePicker(LocalDate.now()));
Node popupContent = datePickerSkin.getPopupContent();

// force a css layout pass to ensure that lookup calls work
popupContent.applyCss();
popupContent.lookup(".month-year-pane").setVisible(false);

root.setCenter(popupContent);

Update:

As of JDK 9 DatePickerSkin is part of the Public API and using the closed com.sun.[...] implementation is no longer needed. (See JavaDoc)

Also, as mentioned in the comments, to get the selected value you have to access the DatePicker from which you extracted the skin (by saving it as an variable for example).

DatePicker datePicker = new DatePicker(LocalDate.now());
DatePickerSkin datePickerSkin = new DatePickerSkin(datePicker);
Node popupContent = datePickerSkin.getPopupContent();
//[...]
LocalDate selectedDate = datePicker.getValue();

You can also listen to value-changes by adding a ChangeListener to the associated property:

datePicker.valueProperty().addListener(new ChangeListener<LocalDate>() {
    @Override
    public void changed(ObservableValue<? extends LocalDate> observable, LocalDate oldValue, LocalDate newValue) {
        System.out.println("New Value: " + newValue);
    }
});
//Or using neat lambda
datePicker.valueProperty().addListener((observable, oldValue, newValue) -> {
    System.out.println("New Value: " + newValue);
});