Html5 datetime-local 控件显示不完整的日期

Question

我是 HTML5 和 Knockout.js 的新手，我在本地日期时间控制方面遇到问题。

这是我正在使用的 HTML 日期时间控件

<script type="text/html" id="DATE.template">
    <input type="datetime-local" data-bind="value: Prompt.CurrentValue, enable: Prompt.IsEnabled, valueUpdate: 'input'" />
</script>

这里是保存按钮，它绑定到保存命令到 javascript 文件。

<div class="buttons-wrapper">
              <button class="button save-idoc-button" data-bind="command: SaveIdocCommand, activity:SaveIdocCommand.isExecuting">Save</button>
              <button class="button cancel-save-button" data-bind="command: CancelIdocCommand, activity:CancelIdocCommand.isExecuting">Cancel</button>
           </div>

当我输入日期而不输入任何时间时，日期在保存时被传递为空。我知道这是一个不完整的日期，因此浏览器认为它是一个无效的日期，但输入的日期没有保存。选定日期绑定到 Prompt.CurrentValue；当用户输入不完整的日期（没有时间）时，prompt.currentvalue 为空，并且我在日期时间控件上收到一条工具提示消息“请输入有效日期或输入的日期不完整”。 （浏览器验证并提供我认为）

最好的方法是什么？ 一种。我们是否需要提供自定义验证并禁用 SAVE 按钮，直到 datetime-local 控件具有有效值。如果是这样，我们如何在html5/knockout.js中实现？

b.有没有办法禁用 datetime-local 控件的浏览器验证，这样即使没有输入时间也可以传递日期。？ （我尝试使用“更新”，但没有用）

c。还有其他更好的方法吗？

编辑：

这是在 viewmodel 中计算的用于验证的 observable； Prompt.CurrentValue 是绑定到 UI 控件的值。当它是日期控制时，此验证错误不起作用。

> hasValidationErrors = ko.computed(function () {
>                     //loop through fields and filter out fields that are set up with validation and has invalid data.
>                     var invalidFieldsArray=ko.utils.arrayFilter(fields(), function (field) {
>                         return !_.isUndefined(field.Prompt) && !_.isNull(field.Prompt) 
>                                   && (
>                                           ((_.has(field.Prompt.CurrentValue,"isValid"))&&!field.Prompt.CurrentValue.isValid())
> 
>                                           || 
>                                           ((_.has(field.Prompt.AdditionalData, "isValid")) && !field.Prompt.AdditionalData.isValid())
>                                       );
>                     });
>                     return invalidFieldsArray.length > 0;;
>                 })

,

此选定的日期时间本地值未绑定（到相应的视图模型：Prompt.CurrentValue），直到用户选择日期并输入全时...我了解浏览器对此控件进行此验证。计算的 observable 如何识别日期控制的这种无效性？ （因为在值有效之前不会传递值）

Answer 1

有没有办法禁用本地日期时间控件的浏览器验证，这样即使没有输入时间也可以传递日期

如果可能，您可以使用<input type="date"> 和<input type="time"> 的组合来代替吗？ （并在使用时使用textInput 绑定）

Answer 2

有几件事 - 如果您将表单提交到服务器，您的<input需要一个名称属性才能正确保存。如果需要，您可以将其预设为当前值，例如<input name="date" etc。

如果你需要帮助，你需要展示你的 viewModel。

重新验证 - 一个简单的 Google 搜索显示此验证套件 https://github.com/Knockout-Contrib/Knockout-Validation

然而，在 Javascript 中与日期有关的任何事情（日期验证、日期表示、日期转换）您都应该使用 Moment.js

编辑：

有机会我会看看你上面的代码。请注意，值不是日期输入的良好绑定。我建议你改变

data-bind="value: Prompt.CurrentValue, enable: Prompt.IsEnabled, valueUpdate: 'input'"

到

data-bind="textInput: Prompt.CurrentValue, enable: Prompt.IsEnabled"

编辑 2：

好的，所以 ANY 版本的 Firefox、IE 或 Safari 不支持日期时间 - 它是纯文本输入。

查看https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Native-Rules 和Knockout date validation not working correctly，但我认为最好切换到moment.js (isValid()) 并坚持使用特定格式的日期字符串或使用jquery 样式的弹出日历。