JavaFX DatePicker Tutorial with Examples

View more Tutorials:

JavaFX Tutorials

JavaFX DatePicker
DatePicker Example
Customize DatePicker
Disable some days

Websites to learn foreign languages for free:

Facebook

Twitter

1- JavaFX DatePicker


// Setting a particular date value in the class constructor
checkInDatePicker = new DatePicker(LocalDate.of(1998, 10, 8));

// Setting a particular date value by using the setValue method
checkInDatePicker.setValue(LocalDate.of(1998, 10, 8));

// Setting the minimum date available in the calendar
checkInDatePicker.setValue(LocalDate.MIN);

// Setting the maximum date available in the calendar
checkInDatePicker.setValue(LocalDate.MAX);

// Setting the current date
checkInDatePicker.setValue(LocalDate.now());

setShowWeekNumber

2- DatePicker Example

DatePickerDemo.java


package org.o7planning.javafx.datapicker;

import java.time.LocalDate;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class DatePickerDemo extends Application {

    @Override
    public void start(Stage stage) {

        DatePicker datePicker = new DatePicker();
        datePicker.setValue(LocalDate.of(2016, 7, 25));
        datePicker.setShowWeekNumbers(true);

        FlowPane root = new FlowPane();
        root.getChildren().add(datePicker);
        root.setPadding(new Insets(10));

        stage.setTitle("DatePicker (o7planning.org)");
        Scene scene = new Scene(root, 300, 200);
        stage.setScene(scene);
        stage.show();
    }

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

}

Running the example:

3- Customize DatePicker

By default, the days displayed on Date Field are formatted according to Local locale and ISO standards. This means the days will display based on the computer configuration running your application.

On the Java code you can customize the format of 'Date Field' via setConverter(..) method, and use setConverter(null) method if you want to return to the default format.

The following example customize display on "Date Field" in the format of "dd-MM-yyyy":

DatePickerConverterDemo.java


package org.o7planning.javafx.datapicker;

import java.time.LocalDate;
import java.time.format.DateTimeFormatter;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
import javafx.util.StringConverter;

public class DatePickerConverterDemo extends Application {

    @Override
    public void start(Stage stage) {

        DatePicker datePicker = new DatePicker();
        datePicker.setValue(LocalDate.of(2016, 7, 25));
        datePicker.setShowWeekNumbers(true);
       
        // Converter
        StringConverter<LocalDate> converter = new StringConverter<LocalDate>() {
            DateTimeFormatter dateFormatter =
                      DateTimeFormatter.ofPattern("dd-MM-yyyy");
           
            @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;
                }
            }
        };   
        datePicker.setConverter(converter);
        datePicker.setPromptText("dd-MM-yyyy");
       

        FlowPane root = new FlowPane();
        root.getChildren().add(datePicker);
        root.setPadding(new Insets(10));

        stage.setTitle("DatePicker (o7planning.org)");
        Scene scene = new Scene(root, 300, 200);
        stage.setScene(scene);
        stage.show();
    }

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

}

4- Disable some days

By default, you can interact with all of days on DatePicker. However, you also can customize the DatePicker in order to disable some days by using the setDayCellFactory method.

The following example will disable all Monday, Tuesday, Wednesday in month.

DatePickerConverterDemo.java


package org.o7planning.javafx.datapicker;

import java.time.DayOfWeek;
import java.time.LocalDate;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.DateCell;
import javafx.scene.control.DatePicker;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
import javafx.util.Callback;

public class DatePickerConverterDemo extends Application {

 
    // Factory to create Cell of DatePicker
    private Callback<DatePicker, DateCell> getDayCellFactory() {

        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);

                        // Disable Monday, Tueday, Wednesday.
                        if (item.getDayOfWeek() == DayOfWeek.MONDAY //
                                || item.getDayOfWeek() == DayOfWeek.TUESDAY //
                                || item.getDayOfWeek() == DayOfWeek.WEDNESDAY) {
                            setDisable(true);
                            setStyle("-fx-background-color: #ffc0cb;");
                        }
                    }
                };
            }
        };
        return dayCellFactory;
    }

    @Override
    public void start(Stage stage) {

        DatePicker datePicker = new DatePicker();
        datePicker.setValue(LocalDate.of(2016, 7, 25));
        datePicker.setShowWeekNumbers(true);
 
        // Factory to create Cell of DatePicker
        Callback<DatePicker, DateCell> dayCellFactory= this.getDayCellFactory();
        datePicker.setDayCellFactory(dayCellFactory);

        FlowPane root = new FlowPane();
        root.getChildren().add(datePicker);
        root.setPadding(new Insets(10));

        stage.setTitle("DatePicker (o7planning.org)");
        Scene scene = new Scene(root, 300, 200);
        stage.setScene(scene);
        stage.show();
    }

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

}

View more Tutorials:

JavaFX Tutorials