UI Bootstrap 和 Angularjs 日期选择器选项卡和直接输入

Question

我们正在基于 HotTowel 模板使用 Angularjs 和 Breeze 开发 SPA

我们在页面上有多个 datePickers 给我们带来了以下问题：

• 当用户切换到日期选择器时，日期选择器会打开，但不会在用户切换到下一个控件时关闭。由于日期选择器堆叠在 ui 的同一列中，这会导致下拉列表覆盖下面的字段。清除它们的唯一方法是选择一个日期或单击表单上的其他位置

• 在编辑绑定到数据模型的现有记录时，用户无法在输入区域中键入日期。如果他们突出显示日期并尝试输入它，它会删除现有日期并且不允许用户键入新日期。如果他们单击 X 以清除输入字段，则他们无法键入新日期。如果他们将光标放在日期的末尾并退格，则日期会消失，日历选择器会设置为 1902 年 1 月。

基本上，如果用户愿意拿起鼠标并单击选择器中的日期并且从不尝试输入日期，这很好。这对我们的用户社区来说是不现实的。

这里是html：

                                <label for="ApplicationCompleteDate" data-ng-show="vm.mode === 'edit'"><strong>Application Complete Date:</strong></label>
                            <div class="input-append" data-ng-show="vm.mode === 'edit'">
                                <span>
                                    <input name="ApplicationCompleteDate" type="text" class="form-control input-medium" tabindex="16" placeholder="{{vm.format}}"
                                           datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false'
                                           is-open="vm.applicationCompleteDateOpened"
                                           datepicker-options="vm.dateOptions"
                                           data-ng-model="vm.formData.dateApplicationComplete"
                                           data-ng-required="vm.applicationCompleteDateRequired"
                                           data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" />
                                </span>
                                <span class="add-on">
                                    <a href="#" data-ng-click="vm.applicationCompleteDateOpen($event)"><i class="icon-calendar"></i></a>
                                </span>
                            </div>
                            <label for="DecisionDatePicker" data-ng-show="vm.mode === 'edit'"><strong>Decision Date:</strong></label>
                            <div class="input-append" data-ng-show="vm.mode === 'edit'">
                                <span>
                                    <input name="DecisionDatePicker" id="ddpID" type="text" class="form-control input-medium" tabindex="14" placeholder="{{vm.format}}"
                                           datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false'
                                           is-open="vm.decisionDateOpened"
                                           datepicker-options="vm.dateOptions"
                                           data-ng-model="vm.formData.dateDecision"
                                           data-ng-required="vm.decisionDateRequired"
                                           data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" />
                                </span>                                    
                                <span class="add-on">
                                    <a href="#" data-ng-click="vm.decisionDateOpen($event)"><i class="icon-calendar"></i></a>
                                </span>
                            </div>
                            <label for="DateClosedPicker" data-ng-show="vm.mode === 'edit'"><strong>Closed Date:</strong></label>
                            <div class="input-append" data-ng-show="vm.mode === 'edit'">
                                <span>
                                    <input name="DateClosedPicker" type="text" class="form-control input-medium" tabindex="15" placeholder="{{vm.format}}"
                                           datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false'
                                           is-open="vm.dateClosedOpened"
                                           datepicker-options="vm.dateOptions"
                                           data-ng-model="vm.formData.dateClosed"
                                           data-ng-required="false"
                                           data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" />
                                </span>                                    
                                <span class="add-on">
                                    <a href="#" data-ng-click="vm.dateClosedOpen($event)"><i class="icon-calendar"></i></a>
                                </span>
                            </div>

我们正在使用 ng-model 的双向绑定。

任何帮助将不胜感激。

谢谢

Answer 1

遇到了同样的问题，我发现了有问题的代码： 这是breeze.debug.js 中的第4786 行

    // exit if no change - extra cruft is because dateTimes don't compare cleanly.
if (newValue === oldValue || (dataType && dataType.isDate && newValue && oldValue && newValue.valueOf() === oldValue.valueOf())) {
    return;
}

问题是 angulars 脏检查器正在执行 === 所以最后它会覆盖视图值，因为它与模型中的不同（因为微风跳过了更新）。如果省略 || 之后的部分您可以正常输入值，尽管我遇到了另一组问题。

这是 Angular 看待数据的方式与微风之间的不匹配。我希望沃德能看到这一点。我去取一张票。不知道什么是处理它的好地方，但我认为微风会是一个（因为角度适用于 pojos）。我会在没有更新本身副作用的情况下更新参考。

Answer 2

如果您希望我对此进行调查，我需要进行复制。 plunker 里面的东西会很好。

我认为我们不能更改我们的属性测试。我们遇到这么多麻烦是有充分理由的。 Angular 没有任何 DataType 的概念，所以它不能做我们所做的事情。

但是我们应该能够找到一个合适的解决方案，也许涉及到 Angular。例如，您可以为此编写一个简单的指令。您可以使用现有的 Ng 处理它；我隐约记得你可以指定一个绑定解析器来复制微风逻辑。我已经很久没有看到那个了，但我认为它就在那里。

Answer 3

我遇到了同样的问题，并通过在视图模型上创建一个本地范围的占位符变量以绑定到日期选择器来解决它。

<input type="text"
    class="form-control"
    datepicker-popup="M/d/yyyy"
    is-open="vm.openedStartDate"
    ng-model="vm.selectedStartDate"
    close-text="Close"
    show-button-bar="false" />

这允许日期选择器的所需行为。

然后我在保存更改之前将微风实体值设置为这个局部变量：

 task.StartDate = vm.selectedStartDate;
 task.EndDate = vm.selectedEndDate;
 datacontext.saveChanges();

这并不完美，但它是解决您所描述问题的可行解决方法。