DateTimePicker weirdoes

Flow
1

I ran into a couple of issues with the default DateTimePicker that Vaadin provides:

  1. It chops of seconds and microseconds for display. That would be even OK in my case, but what that ALSO does is: this triggers a ValueChanged-event on which “isFromClient()” yields true! ||-( In my case that caused an infinite recursion! As workaround I now always need to chop off seconds and nanos from the DateTime before assigning the value. Tedious!

  2. When setting the step of the TimePicker to <900 seconds (15 minutes) it does not provide a drop down any more. How about a drop-down for hours and minutes separately?

  3. I found no way, yet, to set the TimePicker to display and accept time in 24h format. How is that done? Surely that must be possible somehow!?! And I need that irrespectively of the current Locale! Googling the internet and searching this forum yielded nothing usable. There is only a >10 year old threads that claim that there is a setIs24HourFormat(boolean) method, another suggests to use setDateFormat(), but obviously neither exists (any more?).

2

For 1., there’s an open issue: https://github.com/vaadin/vaadin-date-time-picker/issues/49
As for 2., it’s intentional: https://vaadin.com/components/vaadin-date-time-picker/html-examples/date-time-picker-basic-demos#value-resolution - you could create a feature request if you’d want another optional type of behavior.

3

Hi Olli
thanks for responding! I managed to live with 1) and 2) for now. But any wisdom on the 24h format? That would be pretty essential for me.

Regards,
Michael

4

Hi, I refer Olli Tietäväinen suggestion to fork one and edited it.
but the source git is marked read only, link is: https://github.com/vaadin/vaadin-time-picker-flow

And i forked at https://github.com/CNBroderick/vaadin-time-picker-flow

You can clone and install it (Which is Vaadin TimePicker).

I change 3 files in this repo.

After install, the Test method:

        DateTimePicker startTimePicker = new DateTimePickerFactory().lumoSmall()
                .peekTimePicker(timePicker -> timePicker.setHour24Format(true))
                .value(Optional.ofNullable(getStartTime()).orElseGet(LocalDateTime::now)).get();
        DateTimePicker endTimePicker = new DateTimePickerFactory().lumoSmall()
                .peekTimePicker(timePicker -> timePicker.setHour12Format(true))
                .value(Optional.ofNullable(getEndTime()).orElseGet(() -> LocalDateTime.now().plusYears(20))).get();

Get time picker in DateTimePicker 's method

    public TimePicker getTimePicker() {
        try {
            Class<? extends Component> asSubclass = Class.forName(
                    "com.vaadin.flow.component.datetimepicker.DateTimePickerTimePicker"
            ).asSubclass(Component.class);
            return (TimePicker) get().getElement().getChild(1).as(asSubclass);
        } catch (ClassNotFoundException e) {
            throw new RuntimeException("Convert error: " + e.getMessage());
        }
    }
  1. timepickerConnector.js
  const getTimeFormatOptions = function () {
                    // calculate the format options if none done cached or step has changed
                    if (!cachedOptions || cachedStep !== timepicker.step) {
                        cachedOptions = {
                           ** hour12: timepicker.hour12 === null || timepicker.hour12 === undefined || timepicker.hour12,**
                            hour: "numeric",
                            minute: "numeric",
                            second: includeSeconds() ? "numeric" : undefined,
                        };
                        cachedStep = timepicker.step;
                    }
                    return cachedOptions;
                };
  1. GeneratedVaadinTimePicker.java add method

    /**
     * Is use 12 hours format
     * <table>
     *     <tr>
     *         <td>Value</td>
     *         <td>Format</td>
     *     </tr>
     *     <tr>
     *         <td>true</td>
     *         <td>11:23:45 PM</td>
     *     </tr>
     *     <tr>
     *         <td>false</td>
     *         <td>23:23:45 PM</td>
     *     </tr>
     *
     * </table>
     *
     * @param hour12 use 12 hours format
     */
    protected void setHour12Format(boolean hour12) {
        getElement().setProperty("hour12", hour12);
    }
  1. TimePicker.java add method

    /**
     * Is use 12 hours format
     * <table>
     *     <tr>
     *         <td>Value</td>
     *         <td>Format</td>
     *     </tr>
     *     <tr>
     *         <td>true</td>
     *         <td>11:23:45 PM</td>
     *     </tr>
     *     <tr>
     *         <td>false</td>
     *         <td>23:23:45 PM</td>
     *     </tr>
     *
     * </table>
     *
     * @param hour12 use 12 hours format
     */
    public void setHour12Format(boolean hour12) {
        super.setHour12Format(hour12);
    }

    /**
     * Is use 24 hours format
     * <table>
     *     <tr>
     *         <td>Value</td>
     *         <td>Format</td>
     *     </tr>
     *     <tr>
     *         <td>true</td>
     *         <td>23:23:45 PM</td>
     *     </tr>
     *     <tr>
     *         <td>false</td>
     *         <td>11:23:45 PM</td>
     *     </tr>
     *
     * </table>
     *
     * @param hour24 use 24 hours format
     */
    public void setHour24Format(boolean hour24) {
        super.setHour12Format(!hour24);
    }

Factory Class use Fluent Vaadin Flow: https://vaadin.com/directory/component/fluent-vaadin-flow/

18553815.zip (461 KB)

5

You might want to take a look at https://vaadin.com/directory/component/superfields as well.