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

时间:2019-09-20 07:11:20

标签: html datetime data-binding blazor

所以我有一个此类,它的属性为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(无论是键入它还是使用向上和向下控件均不起作用)。如果“开始”的秒值是59,并且我将其增加1,则秒值在返回至59之前的一瞬间显示0(如果我尝试从1降为0,则相同)。就像分钟数之类的东西,我可以在零和非零之间切换就可以了。

所以我想知道是否有一种方法可以获取本地日期时间输入,以让我为秒值输入0?我本以为会有更多的人遇到这个问题,但是我在任何地方都找不到任何讨论。我确实发现datetime-local似乎是一种相对较新的输入类型,并且似乎仅由Chrome,Edge和Opera(我使用的是Chrome)完全支持,所以这只是一个新功能的问题边缘?

1 个答案:

答案 0 :(得分:0)

简介:

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

  

不支持秒。

这意味着控件不支持秒,控件将永远不会为seconds部分设置值。使用step="1"仅具有视觉效果。

关于代码,要使用日期,您应该从绑定格式中删除seconds部分,只是“ yyyy-MM-ddTHH:mm”:

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

sample

解决方法:

如果您想工作几秒钟,则需要使用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
  }
}

workaround

免责声明:请勿在生产环境中尝试使用此功能,不支持秒。某些Internet导航器或设备无法使用此替代方法。

blazorfiddle上尝试。