无法将 <input type="datetime-local" /> 的秒值设置为 0

Question

所以我有这个 class，它有一个 DateTime 类型的属性 Start。

public class ClosedPlatform {

    public DateTime Start;

}

我想做的是将 ClosedPlatform 实例的 Start 属性绑定到 datetime-local 类型的输入。同时我发现 datetime-local 输入默认不显示 DateTime 秒，所以我试图强制它显示 Start 的秒值。

ClosedPlatform closedPlatform;

...

<input type="datetime-local" step="1" @bind="@closedPlatform.Start" @bind:format="yyyy-MM-ddTHH:mm:ss"/>

我已成功设置输入，使其几乎可以正常工作。设置 step="1" 似乎是在线获得日期时间本地输入以显示秒数的常见建议，它确实如此。但是，我的问题是输入不允许我将秒值设置为 0。如果在首次加载输入元素之前 closedPlatform.Start 的秒值已经为 0，则 0 秒会正确显示在输入。但是，如果秒值随后更改为 0 以外的任何值，我将无法使用输入控件将其再次设置回 0（无论是输入还是使用向上和向下控件都不起作用）。如果 Start 的秒值为 59，而我将其增加 1，则秒值会在瞬间显示 0，然后返回到 59（如果我尝试从 1 下降到 0，则相同）。而像分钟值这样的东西，我可以在零值和非零值之间切换就好了。

所以我想知道有没有办法获得本地日期时间输入，让我输入 0 作为秒值？我本以为会有更多人遇到这个问题，但我找不到任何关于它的讨论。我确实发现 datetime-local 似乎是一种相对较新的输入类型，并且似乎只有 Chrome、Edge 和 Opera（我正在使用 Chrome）完全支持它，所以这只是一个问题新功能的边缘有点粗糙？

Answer 1

简介：

首先引用Mozilla <input type="datetime-local"> docs:

Seconds are not supported.

表示控件不支持秒，控件永远不会为seconds部分设置值。使用step="1"只有视觉效果。

关于您的代码，要使用日期，您应该从绑定格式中删除 seconds 部分，只需 "yyyy-MM-ddTHH:mm":

<input type="datetime-local"  
       @bind="@closedPlatform.Start" 
       @bind:format="yyyy-MM-ddTHH:mm" step="1"/>

解决方法：

如果你想使用秒，你需要使用 string 而不是 DateTime（如果你愿意，可以使用类型转换）：

<h5>String: @datestr</h5>
<h5>DateTime: @(parseString(datestr))</h5>
<input type="datetime-local" @bind="datestr"  step="1" />


@code {                     

  string datestr = "2013-10-24T20:36:00";

  protected DateTime? parseString(string s)
  {
      ... your code to cast string to datetime
  }
}

免责声明 不要尝试在生产中使用它，不支持秒。某些 Internet 导航器或设备无法使用此解决方法。

在 blazorfiddle 试试。

无法将 <input type="datetime-local" /> 的秒值设置为 0

Can't set seconds value of <input type="datetime-local" /> to be 0

html

data-binding

datetime

blazor

简介：

解决方法：