# 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/)。