Question

我创建了一个自定义的KnockoutJS绑定，用于Bootstrap DateTimePicker。这是一个JSFiddle来展示我的意思：

除了一个非常重要的细节外，它很有用：比如说，在选择日期后，用户从相应的文本框中删除日期。 “更新”方法不会触发，并且后备字段仍包含先前选择的日期。然而，用户的期望是他们提交的表单没有日期，但是没有达到预期。 要查看问题：在小提琴中，单击以查看日期时间选择器。选择一个日期。然后，从文本框中擦除文本。日期仍显示在范围内。

我开始制作一个解决方案，但它也有一个问题，我不确定我是不是最好的方式。我的解决方案：

潜在的解决方案小提琴：http://jsfiddle.net/NGwGb/1/

包装我的自定义绑定以包含值绑定。好消息：当用户清除文本时，现在调用“值”。但是，我只想在用户清除字段中的文本的一种情况下覆盖（消除）后备日期对象值。所以我将此代码添加到更新方法中：

    if ($(element).find("input").val() == "")
        valueAccessor()(null);
    else {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).data("DateTimePicker").setValue(value);
    }

我认为从DOM中的元素中提取值（实现数据绑定的目的）是非常难看的，而且这段代码打破了最初从后端的日期对象填充表单的情况。

我希望得到一些建议，让用户在从字段中擦除文本时，真正清除模型中日期字段的内容。

...谢谢

-Ben

Answer 1

Bootstrap DateTimePicker有error个事件。来自documentation：

当Moment无法解析日期或由于disabledDates设置而导致时间戳无法更改时触发。返回Moment日期对象。可以使用invalidAt（）找到特定错误。有关更多信息，请参阅Moment的文档。

因此，当用户从相应的文本框中删除日期或写入错误的日期时，将调用此事件。您可以在init函数中添加类似的内容：

    $(element).datetimepicker(options).on("dp.error", function (ev) {
        var observable = valueAccessor();
        console.log(ev.date.toString()); // only for debug.
        observable("");
    });

Bootstrap DateTimePicker + KnockoutJS自定义绑定：无法清除字段

1 个答案: