How do I get a Polaris Textfield component of type date-local

Solved
Shopify Partner
30 0 1

Hi,

 

As far as I am able to see, the Polaris TextField component only has "date" and "datetime-local" as types that can be used to represent dates.

The "date" type displays the format MM/dd/yyy, and the "datetime-local" displays "mm/dd/yyyy --:-- --".

The problem with "date" for me, is that it does not show the pattern for my locale i.e. "dd/MM/yyyy", and the problem with "datetime-local" is that it displays a time, which I do not need. So I guess I need a "date-local".

 

Is there any plans an making this "date-local" type, or is there a way where I can set my custom formatting of the selected date on the component?

 

Thanks,

-Louise

0 Likes

Success.

Shopify Partner
1843 172 547

Hello,

 

Those are HTML5 inout types. Nothing Polaris can really do to extend them. I'd also refer you to this SO answer. Basically there's wire format as defined by the standard, and then there's the presentational side of things left to browsers. You cannot change / extend the wire format, but you certainly can change how the component is displaying dates.

 

In the case of Polaris, it's not really the component at fault either. As mentioned in the SO answer, some browsers are still shady about how they render local dates. For example, I live in the Czech Republic, use a US English configured OS with locale set to Czechia and Chrome displays the date inputs perfectly.

 

So, use Polaris Input and use type=date and the rest is up to the users locale and browser. If that doesn't sound good enough, then you can implement your own component for date rendering that doesn't rely on the standard HTML5 types or extends them.

 

Hope this helped a bit!

I turn coffee in to code - since 1998
0 Likes
Highlighted
Shopify Partner
30 0 1

Hi 

 

 

 

 

0 Likes