# 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](img/e1d1901f1c9bc1deaad0c71e33490033.jpg)

Figure: Vaadin DateField

在本教程中，我们展示了 Vaadin `DateField`组件的基础。 您可能也对相关教程感兴趣： [Vaadin 网格教程](/vaadin/grid/)， [Vaadin 链接教程](/vaadin/link/)， [Vaadin Button 教程](/vaadin/button/)， [Vaadin 滑块教程](/vaadin/slider/)， [Vaadin CheckBox 教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。