# Vaadin `DateField`教程 > 原文： [http://zetcode.com/vaadin/datefield/](http://zetcode.com/vaadin/datefield/) 在 Vaadin `DateField`教程中，我們學習 Vaadin `DateField`組件的基礎。 在 Vaadin `DateField`示例中，所選日期將轉換為回教日期，并顯示在`Label`組件中。 ## Vaadin Vaadin 是一種流行的 Java Web 開發框架，用于構建單頁 Web 應用。 ## Vaadin `DateField` `DateField`是日期輸入組件，它將實際的日期選擇器顯示為彈出窗口。 ## Vaadin `DateField`示例 以下程序演示了 Vaadin `DateField`組件的用法。 所選日期將轉換為回教日期，并顯示在`Label`組件中。 NetBeans IDE 可用于輕松創建 Vaadin Web 應用。 我們需要安裝 NetBeans Vaadin 插件，然后創建一個新的 Vaadin Web 應用項目。 `MyUI.java` ```java package com.zetcode.main; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.HasValue; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.DateField; import com.vaadin.ui.Label; import com.vaadin.ui.Notification; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; import com.zetcode.service.DateConvert; import java.time.LocalDate; import java.time.chrono.HijrahDate; @Theme("mytheme") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { VerticalLayout layout = new VerticalLayout(); DateField field = new DateField(); Label lbl = new Label(); field.addValueChangeListener((HasValue.ValueChangeEvent<LocalDate> event) -> { LocalDate date = (LocalDate) event.getValue(); HijrahDate hjdate = DateConvert.toIslamic(date); lbl.setValue(hjdate.toString() + "!"); }); layout.addComponents(field, lbl); layout.setMargin(true); layout.setSpacing(true); setContent(layout); } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } ``` 這是`MyUI`類。 ```java VerticalLayout layout = new VerticalLayout(); ``` 在我們的示例中，我們在`VerticalLayout`列中顯示兩個組件。 ```java DateField field = new DateField(); ``` 創建一個`DateField`組件。 ```java Label lbl = new Label(""); ``` `Label`組件將支付從日期字段中選擇的值。 ```java field.addValueChangeListener((HasValue.ValueChangeEvent<LocalDate> event) -> { LocalDate date = (LocalDate) event.getValue(); HijrahDate hjdate = DateConvert.toIslamic(date); lbl.setValue(hjdate.toString() + "!"); }); ``` 使用`addValueChangeListener()`，我們為`DateField`中的值更改添加了一個監聽器。 我們用`getValue()`方法獲得`DateField`當前選擇的項目。 使用`DateConvert.toIslamic()`將檢索到的值轉換為回教日期，并使用`setValue()`方法將其設置為標簽。 ```java layout.addComponents(field, lbl); ``` 通過`addComponents()`方法將這兩個組件添加到`VerticalLayout`。 ```java layout.setMargin(true); ``` 我們在`VerticalLayout`周圍留了一些余量。 `DateConvert.java` ```java package com.zetcode.service; import java.time.LocalDate; import java.time.chrono.HijrahChronology; import java.time.chrono.HijrahDate; public class DateConvert { public static HijrahDate toIslamic(LocalDate date) { HijrahDate hjdate = HijrahChronology.INSTANCE.date(date); return hjdate; } } ``` 在`DateConvert`類中，我們使用`HijrahChronology`計算伊斯蘭日期。  圖：Vaadin `DateField` 在本教程中，我們展示了 Vaadin `DateField`組件的基礎。 您可能也對相關教程感興趣： [Vaadin 網格教程](/vaadin/grid/)， [Vaadin 鏈接教程](/vaadin/link/)， [Vaadin `Button`教程](/vaadin/button/)， [Vaadin 滑塊教程](/vaadin/slider/)， [Vaadin `CheckBox`教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。