Blazor: <InputDate ... @bind-Value:format="dd-MM-yyyy"> doesn't format.

[JeepNL]

Describe the bug

With Blazor <InputDate ... @bind-Value:format="dd-MM-yyyy"> the date doesn't format.

With <input @Bind="starship.ProductionDate" @Bind:format="dd-MM-yyyy" /> it `does.

See "InputDate" > https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.0

Screenshot

Additional context

.NET Core SDK (reflecting any global.json):
Version: 3.1.100-preview1-014459
Commit: ac3b59712d

Runtime Environment:
OS Name: Windows
OS Version: 10.0.18362
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\3.1.100-preview1-014459\

Host (useful for support):
Version: 3.1.0-preview1.19506.1
Commit: bbf5542781

.NET Core SDKs installed:
2.1.802 [C:\Program Files\dotnet\sdk]
2.2.402 [C:\Program Files\dotnet\sdk]
3.0.100 [C:\Program Files\dotnet\sdk]
3.1.100-preview1-014459 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
Microsoft.AspNetCore.All 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.0-preview1.19508.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.0-preview1.19506.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.0-preview1.19506.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET Core runtimes or SDKs:
https://aka.ms/dotnet-download

[javiercn]

@JeepNL thanks for contacting us.

@SteveSandersonMS can you take a look? I'm not sure how "@Bind" works with components.

[SteveSandersonMS]

In the specific case of InputDate, it wouldn't make sense to offer a "format" option, because the whole idea of InputDate is to render an <input type=date>. This is a built-in HTML input type, and as per the HTML spec, the format must be yyyy-mm-dd internally, and the way it gets presented to users in the UI is controlled by the browser. Browsers will represent the data according to the browser's language settings.

This is different from a plain <input> as given in the original example, since that's just a freeform textbox and can contain data in any format.

@javiercn When binding to components, it's entirely up to the component to choose what additional options to provide for binding. For example, a component could expose an additional parameter like:

[Parameter] public string ValueFormat { get; set; }

... and then make use of it internally. It's not something that Blazor can add automatically, because the framework itself doesn't know how the component plans to implement the binding.

[JeepNL]

@SteveSandersonMS I know on first sight It looks like it doesn't make sense, and if you live in the US it probably doesn't, but for some people in the rest of the world it does. I've had this kind of conversation about phone-number formatting, postal codes and states 'a couple of times' 20-25 years ago.

The date format of InputSelect is controlled by the browser, and exactly that is the problem. I am Dutch, but I use an US/English W10 O/S. My preferred language for content in my Browser is US/English. Why? Because I don't want to see auto translated 'Dutch' pages on international web sites is one example.

And because I'm a developer, I want to be able how to format the date in such circumstances when I know my (internal business) application will only be used in The Netherlands.

So, for me, it does make sense. See?

[SteveSandersonMS]

I don't live in the US :) I'm British.

I'm afraid the feature you're asking for is just not something that Blazor controls. The date format within an <input type=date> is completely controlled by the browser. See https://stackoverflow.com/a/9519493 for info.

If using a non-browser-controlled format is an absolute requirement for you, then you'll need to not use <input type=date> or InputDate which wraps that. Instead, consider using or implementing an alternative date picker, for example via JS interop. I know that's not as convenient, but I'm afraid that is just the feature set that browsers offer.

[JeepNL]

Oops :) Sorry! (British)

So, the browser/HTML 5 input specification is the problem. Well, I didn't know that. The StackOverflow article cleared that up. That's actually a big disappointment. We're using internet browsers for more than 25 years now and this still isn't fixed. (ie: implemented)

I will look into your suggestions, thank you for your reply.