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

Posted

技术标签:

【中文标题】无法将 <input type="datetime-local" /> 的秒值设置为 0【英文标题】:Can't set seconds value of <input type="datetime-local" /> to be 0 【发布时间】:2019-09-20 07:11:20 【问题描述】:

所以我有这个类,它有一个属性 Start,类型为 DateTime。

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),所以这只是一个新功能有点粗糙的问题边缘?

【问题讨论】:

【参考方案1】:

简介:

首先,引用Mozilla &lt;input type="datetime-local"&gt; docs:

不支持秒。

这意味着,控件不支持秒,控件永远不会为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的主要内容,如果未能解决你的问题,请参考以下文章

asp.net中<input type=button>无法调用后台函数

使用freemarker模板引擎,后台返回的时间格式(datetime类型)无法显示在input type="text"中显示

将 <input type="date"> 更改为波斯日期

从 <input type="file"> 上传文件

如何将预定义的颜色添加到 <input type="color">?

HTML - 将 SELECT 标记内容放入 INPUT type = "text"