Label h1 = new Label("Date Fields");
        h1.addStyleName("h1");
        addComponent(h1);
        HorizontalLayout row = new HorizontalLayout();
        row.addStyleName("wrapping");
        row.setSpacing(true);
        addComponent(row);
        DateField date = new DateField("Default resolution");
        setDate(date);
        row.addComponent(date);
        date = new DateField("Error");
        setDate(date);
        date.setComponentError(new UserError("Fix it, now!"));
        row.addComponent(date);
        date = new DateField("Error, borderless");
        setDate(date);
        date.setComponentError(new UserError("Fix it, now!"));
        date.addStyleName("borderless");
        row.addComponent(date);
        CssLayout group = new CssLayout();
        group.setCaption("Grouped with a Button");
        group.addStyleName("v-component-group");
        row.addComponent(group);
        final DateField date2 = new DateField();
        group.addComponent(date2);
        Button today = new Button("Today", new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                date2.setValue(new Date());
            }
        });
        group.addComponent(today);
        date = new DateField("Default resolution, explicit size");
        setDate(date);
        row.addComponent(date);
        date.setWidth("260px");
        date.setHeight("60px");
        date = new DateField("Second resolution");
        setDate(date);
        date.setResolution(Resolution.SECOND);
        row.addComponent(date);
        date = new DateField("Minute resolution");
        setDate(date);
        date.setResolution(Resolution.MINUTE);
        row.addComponent(date);
        date = new DateField("Hour resolution");
        setDate(date);
        date.setResolution(Resolution.HOUR);
        row.addComponent(date);
        date = new DateField("Disabled");
        setDate(date);
        date.setResolution(Resolution.HOUR);
        date.setEnabled(false);
        row.addComponent(date);
        date = new DateField("Day resolution");
        setDate(date);
        date.setResolution(Resolution.DAY);
        row.addComponent(date);
        date = new DateField("Month resolution");
        setDate(date);
        date.setResolution(Resolution.MONTH);
        row.addComponent(date);
        date = new DateField("Year resolution");
        setDate(date);
        date.setResolution(Resolution.YEAR);
        row.addComponent(date);
        date = new DateField("Custom color");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.addStyleName("color1");
        row.addComponent(date);
        date = new DateField("Custom color");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.addStyleName("color2");
        row.addComponent(date);
        date = new DateField("Custom color");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.addStyleName("color3");
        row.addComponent(date);
        date = new DateField("Small");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.addStyleName("small");
        row.addComponent(date);
        date = new DateField("Large");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.addStyleName("large");
        row.addComponent(date);
        date = new DateField("Borderless");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.addStyleName("borderless");
        row.addComponent(date);
        date = new DateField("Week numbers");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.setLocale(new Locale("fi", "fi"));
        date.setShowISOWeekNumbers(true);
        row.addComponent(date);
        date = new DateField("US locale");
        setDate(date);
        date.setResolution(Resolution.SECOND);
        date.setLocale(new Locale("en", "US"));
        row.addComponent(date);
        date = new DateField("Custom format");
        setDate(date);
        date.setDateFormat("E dd/MM/yyyy");
        row.addComponent(date);
        date = new DateField("Tiny");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.addStyleName("tiny");
        row.addComponent(date);
        date = new DateField("Huge");
        setDate(date);
        date.setResolution(Resolution.DAY);
        date.addStyleName("huge");
        row.addComponent(date);
        date = new InlineDateField("Date picker");
        setDate(date);
        setDateRange(date);
        row.addComponent(date);
        date = new InlineDateField("Date picker with week numbers");
        setDate(date);
        date.setLocale(new Locale("fi", "fi"));
        date.setShowISOWeekNumbers(true);
        row.addComponent(date);
        PropertysetItem item = new PropertysetItem();
        item.addItemProperty("date", new ObjectProperty<Date>(getDefaultDate()));
        FormLayout form = new FormLayout();
        form.setMargin(false);
        FieldGroup binder = new FieldGroup(item);
        form.addComponent(binder.buildAndBind(
                "Picker in read-only field group", "date"));
        binder.setReadOnly(true);
        row.addComponent(form);
    }