Selecting the whole month with PopupDateField


in our app we have a feature where our users can fetch certain events that occured between the two dates they select with the PopupDateField elements (picture of it attached).

However, it’s been observed that the most common use case for this feature has been that our users want to select all the events that happened during a certain month and for that purpose inputing two different date values into two different fields is a bit redundant. Hence my manager suggested that we should implement a possibility for the users to simply open the popupdatefield and then click the month label (helmikuu 2017 in the attached picture) in it, which would then automatically populate the fields with the first and last date of the selected month.

So, can anybody help me to figure out how could I implement the described feature? Alternative methods for implementing this feature are welcome as well, however, I’d prefer to implement in the way I described here.

And thanks for advance,
Rolle Saarinen

I am not sure what exactly you are trying to accomplish. But if apply field.setResolution(Resolution.MONTH) the field becomes month selector.


yes I’m aware of that possibility, however, it is still necessary that the users can also choose to get events that happened between the two specified dates, instead of just selecting the events that happened during a selected month. Hence, setResolution(Resolution.MONTH) isn’t really an option here.

What we basically need is the possibility to have both, so users could easily select events that occured between the two dates with the two PopupDatefields we have, or they could easily just select the month with the PopupDateField startdate field by clicking the Month label at the top of the PopupDateField.

I hope this clarifies our needs a bit.

  • Rolle Saarinen

That feature is not included in PopupDatefield and it is not yet in our corresponding Polymer Element either (it is relatively easy to wrap those to be used with Vaadin 7/8). However there is this add-on (!addon/tuning-datefield
) which claims to support multiselect for dates, could be something for you.

Thanks for the link, I’ll need to check it out and see if it matches our needs. However, I think a simple solution here would be if I could add some sort of onClick listener to the month label in the popupDateField, do you have any suggestions on how would one go and try to implement that to it?