PopupDateField: disable TextField only


is it possible to disable the text field only in a

That means:
the user should be able to choose a date via calendar view. This date should also be displayed in the text field. But it should not be possible to change the date manually in the text field.


I would like to bring this up…

I want to make sure that a date chosen by the user is always a valid date (without validator errors). I think the best way to do this is to disable manual date input.

Any ideas? Maybe via styles…?

Thanks, Thorsten

I think this has been discussed here before.


Also in many other threads like

You can disable or hide the text part with CSS, but on the server you have to be prepared that the user can bypass such a disabling.

Indeed it has been discussed many times and so, should be a good reason for adding the feature to the PopupDateField component, by now? This should have been part of the original use case for the PopupDateField or DateField component.

Think about all that unnecessary overheads incurred in server validation of the user mis-input when it could easily have been prevented by a switch. The idea of ‘Poka-yoke’ or ‘idiot-proofing’ is to ensure that the user is only able to enter the correct data input, which would have been the case if the PopupDateField text field were readonly.

Just yesterday, I was looking for this very feature in the PopupDateField component and was disappointed that Vaadin designers had not thought of it.

Sure we’ve thought of it, but it hasn’t been any priority for us. Loads of other stuff to do as well. Even small changes like this incur other maintenance work, which is usually more than the time that is actually used to fixing the issue in the code.

Anyhow, I’m sure this feature will get there eventually.

In the mean time, I encourage all of us to be a little bit more creative, as this request can easily be satisfied by using a PopupView and an InlineDateField inside it. Display the current value as text in the minimized value, and use a sprinkle of CSS so there’s an indication of a date picker. Focus the date field right after the popup is opened, so that keyboard navigation is available. You can then even close the popup when the user selects a value from the picker (ValueChangeEvent on the date field, immediate mode required).

As a general comment, it is absolutely impossible for us to remember and keep track of the hundreds of such points that come in unless there is a ticket for it. I now created the
enhancement request #6790
for this, anybody can
create enhancement requests and bug reports
once it is clear the feature is not there.

If you are a Vaadin Pro Account subscriber, you could also
vote for the enhancement
to increase its priority.

Jouni Koivuviita,

I often find myself overriding Vaadin component methods as a workaround… This is not only a distraction but adds to my lines of codes and maintenance. As you know, one would start with a use case and see which one(s) of the available ui components could best be used to implement the use case.

The point is that “PopupView and an InlineDateField inside it” may not be the right combination for implementation. For example PopupView is not a ‘Field’ and so, cannot be used in a Vaadin Form. But I understand your general point.

I think, because these “basic” features are in many other UI frameworks, one makes the assumption that that they must be in Vaadin too (Obviously, the ideal preparation would be to always fully review all development tools before starting a project, but how many of us do?).

Anyway, it is only late in the implementation stage that one realises that one had presumed wrong; and then comes the “scratch head” moments – trying to find a workaround.


How about wrapping it with

(but yes, I do agree with you. This should be a standard feature)

dateField.setTextFieldEnabled(false), work for me!