UIBootstrap和Angularjs datepicker选项卡和直接输入
我们正在使用
Angularjs和Breeze基于HotTowel模板开发SPA
我们在页面上有多个datePickers,它们给出了以下问题: >当用户选中日期选择器时,datepicker会打开,但在用户选中下一个控件时不会关闭.由于日期选择器堆叠在ui的同一列中,这会导致下拉列表覆盖下面的字段.清除它们的唯一方法是在表单上的其他位置选择日期或单击 基本上,如果用户愿意拿起鼠标并单击选择器中的日期并且从不尝试输入日期,那么这很好.这对我们的用户社区来说是不现实的. 这是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的双向绑定. 任何帮助,将不胜感激. 谢谢 解决方法
有同样的问题,我发现有问题的代码:
这是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 dirty checker只是在做===所以最后它会覆盖视图值,因为它与模型中的不一样(因为breeze跳过了更新).如果省略||之后的部分你可以正常输入数值,然后我遇到了一系列不同的问题. 这是角度数据查看方式和微风之间的不匹配.我希望沃德看到这一点.我会拿一张票.不知道什么是处理它的好地方,但我认为微风将是那个(因为角度与pojos工作正常).我会在没有更新本身的副作用的情况下更新引用. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |