1

我创建了一个自定义 KnockoutJS 绑定以与Bootstrap DateTimePicker一起使用。这是一个 JSFiddle 来说明我的意思：

http://jsfiddle.net/dXGB3/7/

它工作得很好，除了一个非常重要的细节：假设在选择日期后，用户从相应的文本框中删除了日期。“更新”方法不会触发，支持字段仍包含先前选择的日期。然而，用户的期望是他们正在提交一个没有日期的表单，但这个期望没有得到满足。要查看问题：在小提琴中，单击以查看日期时间选择器。选择一个日期。然后，将文本从文本框中擦除。日期仍显示在跨度中。

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

潜在的解决方案小提琴：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 中的元素中提取值对我来说真的很难看（违背了数据绑定的目的），而且这段代码打破了最初从后端的日期对象填充表单的场景。

我很想就如何让用户在擦除字段中的文本时真正擦除模型中日期字段的内容的最佳方式提出建议。

谢谢...

-本

4

1 回答 1

3

Bootstrap DateTimePicker 有error事件。从文档：

当 Moment 无法解析日期或 timepicker 由于 disabledDates 设置而无法更改时触发。返回一个时刻日期对象。使用 invalidAt() 可以找到具体的错误。有关更多信息，请参阅 Moment 的文档。

因此，当用户从相应的文本框中删除日期或写入错误的日期时，将调用此事件。你可以在你的init函数中添加这样的东西： 

    $(element).datetimepicker(options).on("dp.error", function (ev) {
        var observable = valueAccessor();
        console.log(ev.date.toString()); // only for debug.
        observable("");
    });
于 2014-03-27T08:08:14.773 回答