JavaFx: show DatePicker

Question

I have a ComboBox<MyItem> and I want to show a DatePicker when I select a special item from the ComboBox. I created a class that extends ComboBox, and I have a DatePicker in that class. I have added a listener to its selectedItemProperty:

public class CustomComboBox extends ComboBox<MyItem>{

    private DatePicker datePicker;

    public CustomComboBox(){
        getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> {
                if (MyItem.DATE.equals(newValue)) {
                    initDatePicker();
                    datePicker.show();
                    datePicker.requestFocus();
                }
        });
    }

    private void initDatePicker() {
        if (datePicker == null) {
            datePicker = new DatePicker();
            datePicker.setFocusTraversable(false);
        }
    }
}

So if I select the DATE item the DatePicker should pop up and If I select a date I want to add as the value of the ComboBox First of all why the datePicker not pops up? The second question is this posible to add the selected date to comboBox as value.

Answer 1

I assume you need something like this:

I did it by using a popup class from ControlsFX library.

Play with this demo app to understand the main idea.

import org.controlsfx.control.PopOver;
// here all other needed dependencies

public class Main extends Application {
    private static final String DATE_TYPE = "DATE";

    private class ComboBoxNode {
        private Object value;
        private String type;

        private ComboBoxNode(final Object value, final String type) {
            this.value = value;
            this.type = type;
        }

        @Override
        public String toString() {
            return Objects.toString(value);
        }
    }

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

    @Override
    public void start(Stage primaryStage) {
        final ObservableList<ComboBoxNode> items =
                FXCollections.observableArrayList(
                        new ComboBoxNode(LocalDate.now(), DATE_TYPE),
                        new ComboBoxNode("11:35AM", "TIME"));

        final PopOver datePopOver = new PopOver();
        datePopOver.setTitle("Enter new date");
        datePopOver.setCornerRadius(10);
        datePopOver.setHeaderAlwaysVisible(true);
        datePopOver.setCloseButtonEnabled(true);
        datePopOver.setAutoHide(true);

        final ComboBox<ComboBoxNode> customComboBox = new ComboBox<>(items);
        customComboBox.getSelectionModel().selectedItemProperty().addListener((o, old, newNode) -> {
            if (newNode != null) {
                if (newNode.type.equals(DATE_TYPE)) {
                    final DatePicker datePicker = new DatePicker((LocalDate) newNode.value);
                    datePicker.valueProperty().addListener((obs, oldDate, newDate) -> {
                        items.set(customComboBox.getSelectionModel().getSelectedInde‌​x(), new ComboBoxNode(newDate, DATE_TYPE));
                        datePopOver.hide();
                    });

                    final StackPane stackPane = new StackPane(datePicker);
                    stackPane.setPadding(new Insets(10, 10, 10, 10));

                    datePopOver.setContentNode(stackPane);
                    datePopOver.show(customComboBox);
                } else {
                    datePopOver.hide();
                }
            }
        });

        final FlowPane pane = new FlowPane(customComboBox);
        pane.setPadding(new Insets(10, 10, 10, 10));
        pane.setPrefWidth(400);
        pane.setPrefHeight(300);

        // Show Scene
        final Scene scene = new Scene(pane);
        primaryStage.setTitle("Popup calendar");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}