UIBootstrap和Angularjs datepicker选项卡和直接输入

Question

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

我们在页面上有多个datePickers,它们给出了以下问题:

• 当用户选中日期选择器时,datepicker会打开,但在用户选中下一个控件时不会关闭.由于日期选择器堆叠在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;
}

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

这是 Angular 看待数据的方式与 Breeze 之间的不匹配。我希望沃德能看到这一点。我会拿出一张票。不确定什么是处理它的好地方，但我认为微风就是一个（因为 Angular 与 pojo 配合得很好）。我会更新参考，而不会产生更新本身的副作用。