Question

我有一个输入，允许用户通过uib-datepicker日历（https://angular-ui.github.io/bootstrap/）键入或选择日期。当用户点击输入时，弹出的datepicker弹出允许用户进行选择这是输入：

<input
     datepicker-append-to-body="calendarCtrl.appendToBody"
     uib-datepicker-popup="calendarCtrl.dateFormat"
     ng-model="calendarCtrl.ngModel"
     ng-click="calendarCtrl.open"/>

我需要允许用户在用户模糊输入之前不更新ng-model的选项。为此，我尝试使用ng-model-options。

 ng-model-options={updateOn: 'blur'}

当用户在输入中键入日期时，这非常有用 - 在模糊发生之前不会更新ngModel，并且在模糊之前不会运行任何验证。问题是它打破了日历弹出窗口的功能，因为当用户点击打开的日历来选择日期时没有任何反应。我假设是因为当用户点击日历时，输入上发生了模糊事件？

有没有人遇到过这个问题？是否有一个ng-model-options选项或者datepicker中的某些内容允许用户仍然从日期选择器中进行选择，但是在输入模糊发生之前不会更新ng-model？

由于

Answer 1

听起来你可以在日期选择器中为ngModel使用临时属性ng-model="calendarCtrl.tempSelectedDate"。

然后使用ngBlur事件（https://docs.angularjs.org/api/ng/directive/ngBlur）更新不动产即ie。设置calendarCtrl.ngModel = calendarCtrl.tempSelectedDate。

此外，虽然在calendarCtrl.ngModel中使用范围属性ngModel没有任何阻止，但如果您使用更有意义的名称，例如ng-model="calendarCtrl.dateSelected"，代码将更容易阅读。

这是一个有效的演示http://plnkr.co/edit/90mDPqzadjPt09Tp4SlI?p=preview。

我分叉并扩展了其他人的datepicker plnkr，并进行了两项更改：将ng-blur="blurDate = startDate"添加到<input>＆amp;使用Blur Date: {{ blurDate }}显示值。

使用ng-model-options updateOn：使用uib-datepicker弹出窗口模糊

1 个答案: