Date Time Range Picker

[tug-guenter]

Feature Request Description

Create a LitElement (based on Lit 2.x), which handles two DateTime objects (JS Date handling date and time would be enough).

Proposed Solution

Combine the already existing Date Range Picker with the Date Time Picker.

Proposed Alternatives

@fooloomanzoo/datetime-picker would already handle this (but is outdated using Polymer 3 in the core) see: https://github.com/fooloomanzoo/datetime-picker

Another solution is already being implemented in the brightspace UI: d2l-input-date-time-range see: https://github.com/BrightspaceUI/core/blob/main/components/inputs/docs/input-date-time.md

Additional Context

The control should also be configurable for the view like the Date Range Picker is, but extended with Features from the Date Time Picker.

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: UI5 Web Component users
• Business impact: might improve usecases for filtering on timeseries data

[kineticjs]

Hello @SAP/ui5-webcomponents-topic-b, please take a look of this feature request.

[petyabegovska]

Hi @tug-guenter,

Thanks for your proposal. We should discuss it with our UX/VD design colleagues. Can you share more details/app sample for your use case?

Best regards, Petya

[tug-guenter]

In production I use this @fooloomanzoo/datetime-picker, which is based on Polymer 3.0 in a separated LitElement. Here I also use Intl and Date (internally working with luxon and epoch milliseconds). Styling is modified (to also allow using this on mobile devices and customizing colors, fonts, ...). The selection restrictions are done via events...

<datetime-picker
    class="datetime-input"
    auto-confirm
    hide-now-button
    hide-reset-button
    no-close-on-picker-opened
    .locale="${document.documentElement.lang}"
    .confirmedValue=${this._from.toLocal().toJSDate()}
    .min="${DateTime.fromMillis(this.minFrom)
        .toLocal()
        .toJSDate()}"
    .max="${this._to.toLocal().toJSDate()}"
    @datetime-changed=${this._fromChanged}
    @opened-changed=${e => this._pickerOpenedChanged(e)}
>
</datetime-picker>
<datetime-picker
    class="datetime-input"
    auto-confirm
    hide-now-button
    hide-reset-button
    no-close-on-picker-opened
    .locale="${document.documentElement.lang}"
    .confirmedValue=${this._to.toLocal().toJSDate()}
    .min="${this._from.toLocal().toJSDate()}"
    .max="${DateTime.now().toLocal().toJSDate()}"
    @datetime-changed=${this._toChanged}
    @opened-changed=${e => this._pickerOpenedChanged(e)}
>
</datetime-picker>

Here the buttons for confirm and reset are handled via separated events and a reset object (the nested initialValue parameter doesn't work as expected).

BrightSpaceUI would offer the following:

<d2l-input-date-time-range label="A">
</d2l-input-date-time-range>

So far I've used this to check if it's a possible opportunity to switch from a design system based on @polymer to BrightSpaceUI (I've also tested other design systems as well).

Some differences I've seen from other design system is the time-chooser, that can vary to a analog clock with a separated input header as text, that whether opens on a small button in the outer input field (the header) or automatically opens with a click event on the according time-input field. Using the finger or mouse to pick a date and also to set the clock hands would be very handy (Here I've also seen some drag and drop behavior with landing circles). Scrolling on hours and minutes separately would also be okay. Seconds are optional in my case.