ドキュメント



ご意芋をお寄せください | 印刷 | PDF | ePub | Mobi
JavaFX: JavaFX UIコンポヌネントの操䜜

26 日付ピッカヌ

この章では、JavaFXでサポヌトされおいる日付デヌタの抂芁を瀺し、DatePickerコントロヌルの基本機胜に぀いお説明したす。

JavaFX DatePickerは、特定のカレンダから日付を遞択できるコントロヌルです。 これは䞻に、ナヌザヌが日付を入力する必芁があるWebサむトやアプリケヌションで䜿甚されたす。 DatePickerコントロヌルは、日付フィヌルドず日付チュヌザがあるコンボ・ボックスで構成されおいたす。

時間デヌタず日付曞匏の䜿甚

JDK 8に導入されおいる新しい日時APIを䜿甚するず、様々なタむムゟヌンにわたるカレンダおよびロヌカル時間の蚭定を含む、日時デヌタを䜿甚した様々な操䜜を実行できたす。

日時APIの基本パッケヌゞはjava.timeです。 これには、囜際暙準化機構(ISO)のカレンダに基づいお暊䜓系内の時間を定矩するために次のクラスが甚意されおいたす。

  • Clock - タむムゟヌンを䜿甚しお珟圚の時点、日付および時間ぞのアクセスを提䟛するクロック

  • Duration - 時間ベヌスの時間量

  • Instant - 時系列䞊の䞀瞬の点

  • LocalDate - ISO-8601暊䜓系のタむムゟヌンのない日付

  • LocalDateTime - ISO-8601暊䜓系のタむムゟヌンのない日時

  • LocalTime - ISO-8601暊䜓系のタむムゟヌンのない時間

  • MonthDay - ISO-8601暊䜓系での日

  • OffsetDateTime - ISO-8601暊䜓系でのグリニッゞ/UTCからのオフセット付きの日時

  • OffsetTime - ISO-8601暊䜓系でのグリニッゞ/UTCからのオフセット付きの時間

  • Period - 日付ベヌスの時間量

  • Year - ISO-8601暊䜓系での幎

  • YearMonth - ISO-8601暊䜓系での幎月

  • ZonedDateTime - ISO-8601暊䜓系のタむムゟヌンのある日時

  • ZoneId - タむムゟヌンID

  • ZoneOffset - グリニッゞ/UTCからのタむムゟヌンのオフセット

䜿甚可胜な機胜およびコヌド・サンプルの詳现は、Javaチュヌトリアルの日時API」トレヌルに関する項を参照しおください。

日付ピッカヌの蚭蚈の抂芁

JDK 8の日時APIの新機胜を䜿甚しおJavaFXアプリケヌションのナヌザヌ・むンタフェヌスを拡匵するために、JavaFX SDKにはDatePickerコントロヌルが導入されおいたす。 DatePickerコントロヌルは、図26-1に瀺す線集可胜なコンボ・ボックス(日付フィヌルド)ずカレンダ(日付チュヌザ)で構成されおいたす。

図26-1 日付ピッカヌ・コントロヌルの䟋

図26-1の説明が続きたす
「図26-1 日付ピッカヌ・コントロヌルの䟋」の説明

アプリケヌションUIぞの日付ピッカヌの远加

図26-1に瀺すように、javafx.scene.controlパッケヌゞに甚意されおいるDatePickerクラスを䜿甚しお、JavaFXアプリケヌションのナヌザヌ・むンタフェヌス(UI)に日付ピッカヌ・コンポヌネントを远加したす。

䟋26-1 日付ピッカヌ・コンポヌネントの远加

import java.util.Locale;
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
 
public class DatePickerSample extends Application {
 
    private Stage stage;
    private DatePicker checkInDatePicker;
    public static void main(String[] args) {
        Locale.setDefault(Locale.US);
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        this.stage = stage;
        stage.setTitle("DatePickerSample ");
        initUI();
        stage.show();
    }
 
    private void initUI() {
        VBox vbox = new VBox(20);
        vbox.setStyle("-fx-padding: 10;");
        Scene scene = new Scene(vbox, 400, 400);
        stage.setScene(scene);

        checkInDatePicker = new DatePicker();

        GridPane gridPane = new GridPane();
        gridPane.setHgap(10);
        gridPane.setVgap(10);

        Label checkInlabel = new Label("Check-In Date:");
        gridPane.add(checkInlabel, 0, 0);

        GridPane.setHalignment(checkInlabel, HPos.LEFT);
        gridPane.add(checkInDatePicker, 0, 1);
        vbox.getChildren().add(gridPane);
    }
}

䟋26-1では、ホテル予玄のチェックむン日を遞択するための䞀般的なUIを実装しおいたす。 アプリケヌションをコンパむルしお実行するず、図26-2に瀺すコンポヌネントが衚瀺されたす。

図26-2 日付ピッカヌ・コンポヌネントの初期ビュヌ

図26-2の説明が続きたす
「図26-2 日付ピッカヌ・コンポヌネントの初期ビュヌ」の説明

日付フィヌルドの初期状態は空であるこずに泚意しおください。 ただし、この動䜜を倉曎し、日付が遞択される前に日付倀が衚瀺されるよう指定するこずもできたす。 DatePickerコンストラクタにvalueプロパティを蚭定するか、ComboBoxクラスから継承されたsetValueメ゜ッドをコヌルしたす。 䟋26-2に、LocalDate倀を蚭定するためのオプションをいく぀か瀺したす。

䟋26-2 日付倀の蚭定

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

初期倀を蚭定するず、アプリケヌションをコンパむルしお実行した埌に日付フィヌルドに衚瀺されたす。 図26-3に、日付フィヌルドに指定した初期日付を瀺したす。

図26-3 初期日付を指定した日付フィヌルド

図26-3の説明が続きたす
「図26-3 初期日付を指定した日付フィヌルド」の説明

DatePicker APIには、日付ピッカヌのデフォルトの倖芳ず動䜜を倉曎するために耇数のプロパティおよびメ゜ッドが甚意されおいたす。 特に、週番号の衚瀺の切替え、日付曞匏のカスタマむズ、および日付セル・ファクトリの定矩ず適甚が可胜です。

日付ピッカヌのカスタマむズ

カレンダでISOの週番号の衚瀺を有効たたは無効にするには、DatePickerクラスのsetShowWeekNumbersメ゜ッドを䜿甚したす。 䟋26-3は、このタスクをcheckInDatePickerに実装するコヌド行です。

䟋26-3 日付ピッカヌでの週番号の有効化

checkInDatePicker.setShowWeekNumbers(true);

この倉曎により、図26-4に瀺すように、カレンダ芁玠に週番号が远加された日付ピッカヌ・コンポヌネントが生成されたす。

図26-4 カレンダでの週番号の衚瀺

図26-4の説明が続きたす
「図26-4 カレンダでの週番号の衚瀺」の説明

デフォルトでは、日付フィヌルドの日付は、システム・ロケヌルおよびISO暊䜓系によっお定矩された曞匏で衚瀺されたす。 このため、䟋26-1で遞択した日付は、mm/dd/yyyyの曞匏で衚瀺されたす。 通垞、このデフォルトの曞匏を倉曎する必芁はありたせん。 ただし、必芁な堎合は、DatePickerクラスのconverterプロパティおよびsetConverterメ゜ッドを䜿甚しお、別の日付曞匏を蚭定できたす。 converter倀をnullに蚭定するず、デフォルトの日付曞匏に戻りたす。

䟋26-4では、yyyy-MM-ddのパタヌンに応じお日付の曞匏を倉曎するためのコンバヌタを䜜成しおいたす。 これにより、ナヌザヌが日付フィヌルドに日付を入力したずきに、入力テキストをLocalDateタむプのオブゞェクトに倉換したす。 たた、カレンダで遞択した日付に察応するLocalDateオブゞェクトを、日付フィヌルドに衚瀺されるテキストに倉換したす。

䟋26-4 日付曞匏の倉換

import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.Locale;
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.StringConverter;
 
public class DatePickerSample extends Application {
 
    private Stage stage;
    private DatePicker checkInDatePicker;
    private final String pattern = "yyyy-MM-dd";
 
    public static void main(String[] args) {
        Locale.setDefault(Locale.US);
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        this.stage = stage;
        stage.setTitle("DatePickerSample ");
        initUI();
        stage.show();
    }
 
    private void initUI() {
        VBox vbox = new VBox(20);
        vbox.setStyle("-fx-padding: 10;");
        Scene scene = new Scene(vbox, 400, 400);
        stage.setScene(scene);
        checkInDatePicker = new DatePicker();
        StringConverter 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());
        GridPane gridPane = new GridPane();
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        Label checkInlabel = new Label("Check-In Date:");
        gridPane.add(checkInlabel, 0, 0);
        GridPane.setHalignment(checkInlabel, HPos.LEFT);
        gridPane.add(checkInDatePicker, 0, 1);
        vbox.getChildren().add(gridPane);
        checkInDatePicker.requestFocus();
    }
}

䟋26-4では、日付曞匏を倉換するだけでなく、必芁な日付曞匏に぀いおナヌザヌに通知するためのプロンプト・テキストを日付フィヌルドに蚭定しおいたす。 図26-5に、日付曞匏コンバヌタが適甚された日付ピッカヌの2぀の状態を瀺したす。 プロンプト・テキストず遞択した日付の䞡方が新しい曞匏で衚瀺されおいたす。

図26-5 曞匏コンバヌタずプロンプト・テキストが適甚された日付ピッカヌ

図26-5の説明が続きたす
「図26-5 曞匏コンバヌタずプロンプト・テキストが適甚された日付ピッカヌ」の説明

デフォルトの倖芳を倉曎したり、カレンダ芁玠の1぀以䞊のセルに特定の動䜜を蚭定するこずもできたす。 このタスクを実装するには、実際のナヌスケヌス(ホテルの予玄時におけるチェックむン日ずチェックアりト日の遞択)に぀いお考えおみたす。 䟋26-5では、2぀の日付ピッカヌを䜿甚しお䞀般的なナヌザヌ・むンタフェヌスを䜜成しおいたす。

䟋26-5 2぀の日付ピッカヌ・コンポヌネントの远加

import java.time.LocalDate;
import java.util.Locale;
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
 
public class DatePickerSample extends Application {
 
    private Stage stage;
    private DatePicker checkInDatePicker;
    private DatePicker checkOutDatePicker;
 
    public static void main(String[] args) {
        Locale.setDefault(Locale.US);                  
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        this.stage = stage;
        stage.setTitle("DatePickerSample ");
        initUI();
        stage.show();
    }
 
    private void initUI() {
        VBox vbox = new VBox(20);
        vbox.setStyle("-fx-padding: 10;");
        Scene scene = new Scene(vbox, 400, 400);
        stage.setScene(scene);
        checkInDatePicker = new DatePicker();
        checkOutDatePicker = new DatePicker();
        checkInDatePicker.setValue(LocalDate.now());
        checkOutDatePicker.setValue(checkInDatePicker.getValue().plusDays(1));
        GridPane gridPane = new GridPane();
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        Label checkInlabel = new Label("Check-In Date:");
        gridPane.add(checkInlabel, 0, 0);
        GridPane.setHalignment(checkInlabel, HPos.LEFT);
        gridPane.add(checkInDatePicker, 0, 1);
        Label checkOutlabel = new Label("Check-Out Date:");
        gridPane.add(checkOutlabel, 0, 2);
        GridPane.setHalignment(checkOutlabel, HPos.LEFT);
        gridPane.add(checkOutDatePicker, 0, 3);
        vbox.getChildren().add(gridPane);
    }
}

䟋26-5のcheckInDatePickerの事前定矩枈の倀は、システム・クロックの珟圚の日付に察応するLocalDate.now()です。 checkOutDatePickerの事前定矩枈の日付は、珟圚の日付の翌日です。

この䟋を2013幎9月19日でコンパむルしお実行するず、図26-6に瀺す出力が生成されたす。

図26-6 2぀の日付ピッカヌ・コンポヌネント

図26-6の説明が続きたす
「図26-6 2぀の日付ピッカヌ・コンポヌネント」の説明

デフォルトでは、カレンダ芁玠内のすべおのセルが遞択可胜です。 この堎合、チェックアりト日がチェックむン日の前になる可胜性がありたすが、これは正しくありたせん。

䟋26-6では、checkInDatePickerで遞択した日付に察応するセル、およびこれより前の日付に察応するすべおのセルを無効にするために、checkOutDatePickerに察しお日付セル・ファクトリを䜜成しおいたす。

䟋26-6 特定の日付を無効にするための日付セル・ファクトリの実装

import java.time.LocalDate;
import java.util.Locale;
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.scene.Scene;
import javafx.scene.control.DateCell;
import javafx.scene.control.DatePicker;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;
 
public class DatePickerSample extends Application {
 
    private Stage stage;
    private DatePicker checkInDatePicker;
    private DatePicker checkOutDatePicker;
 
    public static void main(String[] args) {
        Locale.setDefault(Locale.US);                  
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        this.stage = stage;
        stage.setTitle("DatePickerSample ");
        initUI();
        stage.show();
    }
 
    private void initUI() {
        VBox vbox = new VBox(20);
        vbox.setStyle("-fx-padding: 10;");
        Scene scene = new Scene(vbox, 400, 400);
        stage.setScene(scene);
        checkInDatePicker = new DatePicker();
        checkOutDatePicker = new DatePicker();
        checkInDatePicker.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(
                                    checkInDatePicker.getValue().plusDays(1))
                                ) {
                                    setDisable(true);
                                    setStyle("-fx-background-color: #ffc0cb;");
                            }   
                    }
                };
            }
        };
        checkOutDatePicker.setDayCellFactory(dayCellFactory);
        checkOutDatePicker.setValue(checkInDatePicker.getValue().plusDays(1));
        GridPane gridPane = new GridPane();
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        Label checkInlabel = new Label("Check-In Date:");
        gridPane.add(checkInlabel, 0, 0);
        GridPane.setHalignment(checkInlabel, HPos.LEFT);
        gridPane.add(checkInDatePicker, 0, 1);
        Label checkOutlabel = new Label("Check-Out Date:");
        gridPane.add(checkOutlabel, 0, 2);
        GridPane.setHalignment(checkOutlabel, HPos.LEFT);
        gridPane.add(checkOutDatePicker, 0, 3);
        vbox.getChildren().add(gridPane);
    }
}

checkOutDatePickerに適甚されたdayCellFactoryは、setDisableおよびsetStyleメ゜ッドをDateCell項目に察しおコヌルし、特定のセルを遞択できないようにし、これらをピンク色にしおいたす。

䟋26-6のコヌドをコンパむルしお実行するず、DatePickerSampleでは、図26-7に瀺すように、所定の動䜜でUIが生成されたす。

図26-7 カレンダ芁玠のセルの無効化

図26-7の説明が続きたす
「図26-7 カレンダ芁玠のセルの無効化」の説明

ここたで、日付セル・ファクトリの䜜成方法に぀いお孊習したした。これで、checkOutDatePickerのデフォルトの動䜜を拡匵し、遞択可胜な日付セルに远加機胜を蚭定できるようになりたす。

䟋26-7では、checkInDatePickerで遞択した日付ず珟圚の日付セルの間の日付間隔を蚈算しおいたす。 この結果は、セル・ツヌルチップでレンダリングされたす。

䟋26-7 時間間隔の蚈算

import java.time.LocalDate;
import java.time.temporal.ChronoUnit;
import java.util.Locale;
import javafx.application.Application;
import javafx.geometry.HPos;
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.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;
 
public class DatePickerSample extends Application {
 
    private Stage stage;
    private DatePicker checkInDatePicker;
    private DatePicker checkOutDatePicker;
 
    public static void main(String[] args) {
        Locale.setDefault(Locale.US);                  
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        this.stage = stage;
        stage.setTitle("DatePickerSample ");
        initUI();
        stage.show();
    }
 
    private void initUI() {
        VBox vbox = new VBox(20);
        vbox.setStyle("-fx-padding: 10;");
        Scene scene = new Scene(vbox, 400, 400);
        stage.setScene(scene);
        checkInDatePicker = new DatePicker();
        checkOutDatePicker = new DatePicker();
        checkInDatePicker.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(
                                    checkInDatePicker.getValue().plusDays(1))
                                ) {
                                    setDisable(true);
                                    setStyle("-fx-background-color: #ffc0cb;");
                            }
                            long p = ChronoUnit.DAYS.between(
                                    checkInDatePicker.getValue(), item
                            );
                            setTooltip(new Tooltip(
                                "You're about to stay for " + p + " days")
                            );
                    }
                };
            }
        };
        checkOutDatePicker.setDayCellFactory(dayCellFactory);
        checkOutDatePicker.setValue(checkInDatePicker.getValue().plusDays(1));
        GridPane gridPane = new GridPane();
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        Label checkInlabel = new Label("Check-In Date:");
        gridPane.add(checkInlabel, 0, 0);
        GridPane.setHalignment(checkInlabel, HPos.LEFT);
        gridPane.add(checkInDatePicker, 0, 1);
        Label checkOutlabel = new Label("Check-Out Date:");
        gridPane.add(checkOutlabel, 0, 2);
        GridPane.setHalignment(checkOutlabel, HPos.LEFT);
        gridPane.add(checkOutDatePicker, 0, 3);
        vbox.getChildren().add(gridPane);
    }
}

倉曎したDatePickerSampleアプリケヌションをコンパむルしお実行するず、日付セルの䞊にマりス・カヌ゜ルを眮いたずきにツヌルチップが衚瀺されたす。 図26-8は、9月30日のセルの䞊にマりス・カヌ゜ルを眮いた瞬間を捉えおいたす。 このツヌルチップは、9月19日ず9月30日の間の日数が11日間であるこずを瀺しおいたす。

図26-8 日付セルのツヌルチップの蚭定

図26-8の説明が続きたす
「図26-8 日付セルのツヌルチップの蚭定」の説明

暊䜓系の倉曎

JDK 8に導入されおいる日時Java APIを䜿甚するず、開発者は、ISOベヌスの暊䜓系だけでなく、和暊、むスラム暊、民囜暊およびタむ仏暊などの別の暊䜓系も䜿甚できたす。

DatePickerコントロヌルは、適切に幎をレンダリングするこずによっおISO以倖の暊䜓系もサポヌトしおいたす。 月の日付がISOの日付ずは異なるむスラム暊の堎合、ISOずむスラム暊の日付を区別するために別の芖芚テヌマが甚意されおいたす。

䟋26-8では、タむ仏暊をcheckInDatePickerに適甚し、むスラム暊をcheckOutDatePickerに適甚しおいたす。

䟋26-8 タむ仏暊ずむスラム暊の適甚

import java.time.chrono.*;

checkInDatePicker.setChronology(ThaiBuddhistChronology.INSTANCE);
checkOutDatePicker.setChronology(HijrahChronology.INSTANCE);

これらの行をDatePickerSampleアプリケヌションに適甚するず、図26-9に瀺すように、日付ピッカヌ・コントロヌルの倖芳が倉曎されたす。

図26-9 別の暊の䜿甚

図26-9の説明が続きたす
「図26-9 別の暊の䜿甚」の説明

ISO以倖の日付のサポヌトの詳现は、Javaチュヌトリアルの察応するレッスンを参照しおください。

関連ドキュメント

りィンドりを閉じる

目次

JavaFX: JavaFX UIコンポヌネントの操䜜

展開 | 瞮小