Add <s-datetime-field> or time support in <s-date-field>

Polaris
1

Currently, only supports date selection.
There is no built-in way to select time using Polaris Web Components.

In many admin use cases (e.g., scheduling, publish date, offer expiry),
we need both date and time selection.

Request:

  • Either add time support to
  • Or introduce a new web component
  • It should work without requiring Polaris React

Reason:
Polaris Web Components are meant to work without React,
but currently there is no native date-time solution.

2

For admin apps that handle scheduling or offer expiry the date only picker really doesnt cut it. Until Shopify adds native time support to Polaris Web Components, what we’ve done as a workaround is pair the s-date-field with a plain s-text-field using a time pattern like type="time" or even just a text input with placeholder formatting (HH:MM). Its not as clean as a proper datetime picker but it works without pulling in React and you can combine the values on submit. Something like a s-inline-stack with the date field and time field side by side keeps it looking consistent with the rest of the Polaris admin UI.

Another option if you dont mind a small dependency is to use a lightweight vanilla JS time picker and style it to match Polaris tokens (colors, border radius, font). The Polaris design tokens are available as CSS custom properties so its not too hard to get it visually consistent even with a non Polaris component.

Hope that workaround helps for now!