Working with DateTimePicker

In our Vaadin8 app we handled date+time as separate fields, sharing the same underlying Timestamp property through some hackery.
Now in Vaadin20 I thought I should try to use DateTimePicker, but it seems to be somewhat lacking in functionality

I view this as essential:

  • when user fills in time, I’d like to default the date to a specific value if it is empty
  • when user clears either field, I want to null the value
  • Ensure that value as a whole is invalid if only one part is filled

And this would be nice:

  • I want to be able to set either field readOnly. For instance to allow user to change time but not date

There doesn’t seem to be a way for me to fix this with a subclass, since the DatePicker and TimePicker are private.
I assume I can do some things with client-side event listeners, but I wouldn’t know where to start.

It is tempting to make a MyDateTimePicker as a copy of Vaadin’s, and adapt to my needs, but I’m unsure what I would need to do to be compliant with the license

There is a ticket for the first part of your needs https://github.com/vaadin/web-components/issues/668 You might find some useful workarounds there.

(I seem to recall someone declared that they would contribute an implementation of that feature, but that seems to have stalled unfortunately…)

As for the license, DTP is open source and Apache 2.0 licensed, so I don’t see any problems with you creating your own fork of it.

@useful-whale , the fork is one thing, but what do I do after that? Don’t I need to ensure it is available for others? I don’t have any problem with that, but it causes extra housekeeping
I’ll have a go to see if i is as easy as I hope, and think about implications later

You mean in-house or publicly? In case it’s in-house you can just bundle it with your project, and if you mean publicly, here are instructions on how to make an addon available in the Vaadin Directory https://vaadin.com/directory-help

@useful-whale I think it was me that wanted to contribute this, but I struggled implementing it on web component side. Couldn’t get the event order to be consistent every time. Didn’t have much time to work on it as well, so gave up after several attempts (even after getting some internal help) .

Ah indeed! It’s definitely not trivial. We’ve also run into problems making the DTP work with the new validation mechanism. In hindsight I’d say the way the component was implemented was a mistake. At the time of course it seemed like a quick way to provide a combined date and time picker…

Looks like I should ignore DateTimePicker, and just make my own CustomField with a DatePicker and a TimePicker.
With almost no code I have something that looks promising.

Oh yes, that’s a good approach