Vaadin DateField tutorial

In Vaadin DateField tutorial we learn the basics of the Vaadin DateField component. In the Vaadin DateField example the selected date is converted to Islamic date and displayed in a Label component.

Vaadin

Vaadin is a popular Java web development framework, which is used for building single page web applications.

Vaadin DateField

DateField is a date entry component which displays the actual date selector as a popup.

Vaadin DateField example

The following program demonstrates the usage of a Vaadin DateField component. The selected date is converted to Islamic date and displayed in a Label component.

NetBeans IDE can be used to easily create a Vaadin web application. We need to install NetBeans Vaadin plugin and then create a new Vaadin Web Application Project.

MyUI.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 {
    }
}

This is the MyUI class.

VerticalLayout layout = new VerticalLayout();

In our example, we display two components in a column with VerticalLayout.

DateField field = new DateField();

A DateField component is created.

Label lbl = new Label("");

The Label component dispays the value selected from the date field.

field.addValueChangeListener((HasValue.ValueChangeEvent<LocalDate> event) -> {

    LocalDate date = (LocalDate) event.getValue();
    
    HijrahDate hjdate = DateConvert.toIslamic(date);
    lbl.setValue(hjdate.toString() + "!");
});

With addValueChangeListener(), we add a listener for value changes in DateField. We get the currently selected item of the DateField with the getValue() method. The retrieved value is converted to Islamic date with DateConvert.toIslamic() and set to the label using the setValue() method.

layout.addComponents(field, lbl);

The two components are added to the VerticalLayout with the addComponents() method.

layout.setMargin(true);

We put some margin around the VerticalLayout.

DateConvert.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;
    }
}

In the DateConvert class we use the HijrahChronology to calculate the Islamic date.

Vaadin DateField
Figure: Vaadin DateField

In this tutorial, we have showed the basics of the Vaadin DateField component. You might also be interested in the related tutorials: Vaadin Grid tutorial, Vaadin Link tutorial, Vaadin Button tutorial, Vaadin Slider tutorial, Vaadin CheckBox tutorial, Java tutorial.