加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 06:46:55 所属栏目:安全 来源:网络整理
导读:我们正在使用 Angularjs和Breeze基于HotTowel模板开发SPA 我们在页面上有多个datePickers,它们给出了以下问题: 当用户选中日期选择器时,datepicker会打开,但在用户选中下一个控件时不会关闭.由于日期选择器堆叠在ui的同一列中,这会导致下拉列表覆盖下面的字
我们正在使用 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的双向绑定.

任何帮助,将不胜感激.

谢谢

解决方法

有同样的问题,我发现有问题的代码:
这是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工作正常).我会在没有更新本身的副作用的情况下更新引用.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读