Question

我是HTML5和Knockout.js的新手。我在datetime-local控件中面临一个问题。

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

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

这是Save按钮，它被绑定到savecommand到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>

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

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

湾有没有办法禁用日期时本地控制的浏览器验证，以便即使没有输入时间也可以传递日期。（我尝试使用“novalidation”，但它没有用）

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

编辑：

这是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;;
>                 })

，

此选定的datetime-local值未绑定（到相应的viewmodel：Prompt.CurrentValue），直到用户选择日期并输入全部时间...我理解浏览器为此控件执行此验证。计算的observable如何识别日期控制的无效性？（因为在值有效之前不会传递值）

Answer 1

有几件事 - 如果您要将表单提交到服务器，则<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：

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

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

Answer 2

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

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

Html5日期时间 - 本地控件显示不完整的日期

2 个答案: