vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

DateTimePicker should support setClearButtonVisible like DatePicker and TimePicker #2163

Open quartelh opened 3 years ago

quartelh commented 3 years ago

Describe your motivation

Right now DatePicker and TimePicker support setClearButtonVisible. But DateTimePicker does not. This means inconsistent behaviour.

Describe the solution you'd like

Add the setClearButtonVisible to DateTimePicker too

Describe alternatives you've considered

The work around we currently use is a custom component that basically wraps a DatePicker and a TimePicker to get a constistent DateTimePicker in our solution.

Additional context

sissbruecker commented 3 years ago

Can you please elaborate on what your expectations are? There are multiple ways of how such a request can be interpreted:

  1. Show the clear buttons on both, the DatePicker and the TimePicker
  2. Allow controlling the visibility of the clear buttons of DatePicker and TimePicker individually
  3. Show a new clear button at the end of the component that clears both, DatePicker and TimePicker

There are no workarounds using existing Java APIs at the moment, as DateTimePicker does not expose the DatePicker and TimePicker instances. The only solution for now is to grab and modify the instances using executeJs:

// Show clear button on date picker
dateTimePicker.getElement().executeJs("this.querySelector('[slot=\"date-picker\"]').clearButtonVisible = true");
// Show clear button on time picker
dateTimePicker.getElement().executeJs("this.querySelector('[slot=\"time-picker\"]').clearButtonVisible = true");
quartelh commented 3 years ago

Right now the appearance of the DateTimePicker looks like a combination of a separate DatePicker with a separate TimePicker, so adding a clear button that clears both at the same time (option 3) would mean a (normal) button outside the 2 controls, which might seem a bit off from a visual /graphical perspective.

I imagine that following how the clear button is now implemented in both the DatePicker and TimePicker is the most logical and recognisable way for end users, so that would be option 1.

However, from a functional perspective clearing both pickers at once makes the most sense. "I have a date time and I want to clear it". And besides, what would the value be when the date was removed, but not the time. And should this situation raise a validation error? What if time was removed, whould the value be invalid or would it assume time 00:00:00 ?

Having one button (say on the DatePicker part) clear both pickers might also be counter intuitive.

So having a separate button outside the pickers would functionally be the obvious choice. But from a visual /graphical perspective it would be wise to somehow make the button an integral part of the overall control.