Пользовательская привязка Bootstrap DateTimePicker + KnockoutJS: невозможно очистить поле

Я создал пользовательскую привязку KnockoutJS для использования с Bootstrap DateTimePicker. Вот JSFiddle, чтобы показать, что я имею в виду:

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

Это прекрасно работает, за исключением одной очень важной детали: скажем, после выбора даты пользователь удаляет дату из соответствующего текстового поля. Метод «обновить» не срабатывает, а поле поддержки по-прежнему содержит ранее выбранную дату. Однако пользователь ожидает, что он отправляет форму без даты, но это ожидание не оправдывается. Чтобы увидеть проблему: в скрипке нажмите, чтобы просмотреть средство выбора даты и времени. Выберите дату. Затем сотрите текст из текстового поля. Дата по-прежнему отображается в диапазоне.

Я начал разрабатывать решение, но у него также есть проблема, и я не уверен, что сделаю это наилучшим образом. Мое решение:

Скрипт потенциального решения: http://jsfiddle.net/NGwGb/1/

Оберните мою пользовательскую привязку, чтобы включить привязку значения. Хорошая новость: "value" теперь вызывается, когда пользователь стирает текст. Но я хочу перезаписать (стереть) значение объекта резервной даты только в том случае, когда пользователь стирает текст в поле. Поэтому я добавил этот код в метод обновления:

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

Я думаю, что для меня действительно некрасиво извлекать значение из элемента в DOM (превращает цель привязки данных), плюс этот код нарушает сценарий первоначального заполнения формы из объекта даты в бэкэнде.

Я хотел бы получить предложения о том, как лучше всего позволить пользователю действительно стереть содержимое поля даты в модели, когда он стирает текст из поля.

Спасибо...

-Бен


datepicker datetimepicker bootstrap-datetimepicker knockout.js
person BenjiFB    schedule 26.03.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Bootstrap DateTimePicker имеет событие error. Из документации:

Срабатывает, когда момент не может проанализировать дату или когда средство выбора времени не может измениться из-за параметра disabledDates. Возвращает объект даты момента. Конкретную ошибку можно найти с помощью invalidAt(). Для получения дополнительной информации см. документацию Moment.

Таким образом, когда пользователь удаляет дату из соответствующего текстового поля или пишет неправильную дату, это событие будет вызвано. Вы можете добавить что-то вроде этого в свою функцию init:

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