JavaFX Tutorial - JavaFX DatePicker








JavaFX DatePicker enables selection of a day from the given calendar.

The DatePicker control consists of a combo box with a date field and a date chooser.

JavaFX DatePicker control works with JDK 8 Date-Time API. 

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
/*from   ww w. ja v  a  2 s.c om*/
public class Main extends Application {
  public static void main(String[] args) {
    launch(args);
  }
  @Override
  public void start(Stage stage) {
    VBox vbox = new VBox(20);
    Scene scene = new Scene(vbox, 400, 400);
    stage.setScene(scene);

    DatePicker checkInDatePicker = new DatePicker();

    vbox.getChildren().add(checkInDatePicker);

    stage.show();
  }
}

The code above generates the following result.

null




DatePicker Creation

We can create a DatePicker and set a particular date value in the class constructor. 

dateP = new DatePicker(LocalDate.of(2014, 10, 8));

We can also set a date value using setValue method. 

checkInDatePicker.setValue(LocalDate.of(2014, 10, 8));
checkInDatePicker.setValue(LocalDate.now());

The following code uses setValue to add more time to the ending DatePicker.

import java.time.LocalDate;
/*from  w  w  w .  j ava 2  s.c o  m*/
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage stage) {
    VBox vbox = new VBox(20);
    Scene scene = new Scene(vbox, 400, 400);
    stage.setScene(scene);
    DatePicker startDatePicker = new DatePicker();
    DatePicker endDatePicker = new DatePicker();
    
    startDatePicker.setValue(LocalDate.now());
    endDatePicker.setValue(startDatePicker.getValue().plusDays(1));

    vbox.getChildren().add(new Label("Start Date:"));
    vbox.getChildren().add(startDatePicker);
    vbox.getChildren().add(new Label("End Date:"));
    vbox.getChildren().add(endDatePicker);
    stage.show();
  }
}

The code above generates the following result.

null




Customizing the Date Picker

We can enable and disable showing the ISO week numbers in the DatePicker by using its setShowWeekNumbers method. 

dateP.setShowWeekNumbers(true);

By default, the DatePicker uses the date format defined by the system locale and the ISO calendar system. 

import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
/*from  www. j av  a2  s.  c  om*/
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.StringConverter;

public class Main extends Application {

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

  @Override
  public void start(Stage stage) {
    String pattern = "yyyy-MM-dd";
    VBox vbox = new VBox(20);
    Scene scene = new Scene(vbox, 400, 400);
    stage.setScene(scene);
    DatePicker checkInDatePicker = new DatePicker();
    StringConverter<LocalDate> converter = new StringConverter<LocalDate>() {
      DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern(pattern);

      @Override
      public String toString(LocalDate date) {
        if (date != null) {
          return dateFormatter.format(date);
        } else {
          return "";
        }
      }

      @Override
      public LocalDate fromString(String string) {
        if (string != null && !string.isEmpty()) {
          return LocalDate.parse(string, dateFormatter);
        } else {
          return null;
        }
      }
    };
    checkInDatePicker.setConverter(converter);
    checkInDatePicker.setPromptText(pattern.toLowerCase());

    vbox.getChildren().add(checkInDatePicker);
    checkInDatePicker.requestFocus();
    stage.show();
  }
}

The code above generates the following result.

null

DateCell

By default, all the cells in the calendar elements are available for selection. We can use a day cell factory to disable the cell. 

import java.time.LocalDate;
/*from w ww  .  jav  a  2 s .co  m*/
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.DateCell;
import javafx.scene.control.DatePicker;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;

public class Main extends Application {
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage stage) {
    VBox vbox = new VBox(20);
    Scene scene = new Scene(vbox, 400, 400);
    stage.setScene(scene);
    DatePicker startDatePicker = new DatePicker();
    DatePicker endDatePicker = new DatePicker();
    startDatePicker.setValue(LocalDate.now());
    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 (item.isBefore(startDatePicker.getValue().plusDays(1))) {
              setDisable(true);
              setStyle("-fx-background-color: #EEEEEE;");
            }
          }
        };
      }
    };
    endDatePicker.setDayCellFactory(dayCellFactory);
    endDatePicker.setValue(startDatePicker.getValue().plusDays(1));
    vbox.getChildren().add(new Label("Start Date:"));
    vbox.getChildren().add(startDatePicker);
    vbox.getChildren().add(new Label("End Date:"));
    vbox.getChildren().add(endDatePicker);
    stage.show();
  }
}

The code above generates the following result.

null

Example

Install tooltip for each date cell.

import java.time.LocalDate;
import java.time.temporal.ChronoUnit;
/*from w  ww.ja v  a 2s.co  m*/
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.DateCell;
import javafx.scene.control.DatePicker;
import javafx.scene.control.Label;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;

public class Main extends Application {
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage stage) {
    VBox vbox = new VBox(20);
    Scene scene = new Scene(vbox, 400, 400);
    stage.setScene(scene);
    final DatePicker startDatePicker = new DatePicker();
    DatePicker endDatePicker = new DatePicker();
    startDatePicker.setValue(LocalDate.now());
    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);

            long p = ChronoUnit.DAYS.between(startDatePicker.getValue(), item);
            setTooltip(new Tooltip("You're about to stay for " + p + " days"));
          }
        };
      }
    };
    endDatePicker.setDayCellFactory(dayCellFactory);
    endDatePicker.setValue(startDatePicker.getValue().plusDays(1));
    vbox.getChildren().add(new Label("Start Date:"));
    vbox.getChildren().add(startDatePicker);
    vbox.getChildren().add(new Label("End Date:"));
    vbox.getChildren().add(endDatePicker);
    stage.show();
  }
}

The code above generates the following result.

null