vscode-inputbox type="date" => format for date (how to change)

[rene22]

How can I add a format pattern to the
vscode-inputbox type="date"

I wished the date in format dd.mm.yyyy

now it is 07/31/2023
mm/dd/yyyy with / separator instead of . separator

I did not find any documentation about how to change this pattern. is there an attribute?

The only thing is to switch to the native and add a date picker but then how do I get the vscode theme color changes?

<input type="text" class="datep" id="${this.name}" placeholder="${this.label}" value="${this.value}"
maxLength=${this.length} ${this.editable === 'true' ? `` : readonly} >

Would be great if anyone has experience or an idea. thanks.

[isidorn]

Please share your extension exact code so we understand what you are actually trying to do.

[Mdcms]

Hello
Thank you for replying.
I don’t think the whole code will bring something.

We use the vscode-webview-elements
https://github.com/bendera/vscode-webview-elements
https://bendera.github.io/vscode-webview-elements/

There is the inputbox

The field can have a certain type

Name
type
Attribute
type
Type
"color"|"date"|"datetime-local"|"email"|"file"|"month"|"number"|"password"|"tel"|"text"|"time"|"url"|"week" = 'text'
Description
Text-like input types

When we use it as type=’date’ field it perfectly comes with the date picker.
The content of the date is in our case now example:

08/31/2023 - month/day/year (us format)

We would like to be able to change this format for example to:

31.08.2023 – day.month.year (german format)

I know this could be achieved by changing the display language for example from english to german in this case.

But what if we want to keep language English but have to date be shown in german format. Or whatever format I want decoupled by the language.

Is there a way to achieve that?

Thanks and Regards,
René

[r3m0t]

Have you tried setting the lang attribute on a parent element? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

[rene22]

Thanks for the idea.
I did not know about it. Tried it now on <td level and directly on <vscode-inputbox level and unfortunately no effect. Would have been great if it worked.

[r3m0t]

Hi, if the https://github.com/microsoft/vscode-webview-ui-toolkit/ components are not flexible enough, you can extract their CSS from the Webview Developer Tools or from their source code, or fork the repository. Their CSS all leads back to CSS variables described here- https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content

[Mdcms]

Thanks, it's less the CSS than format behaviour. I will reply to isidorn.