Question

我在我的应用程序中使用了Angular-UI Bootstrap的datepicker-popup。

如果用户单击并键入文本输入，则在每次按键后更新$ scope.dt并将光标位置重置为字符串的末尾，从而使基于键盘的输入或修改所选日期变得非常困难。

问题：是否有一种简单的方法来修改文本输入的行为，以防止在用户键入时更改$ scope.dt直到按下返回键？

这是使用datepicker-popup的标准示例代码：

<h4>Popup</h4>
<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>

这是一个示例Plnkr的链接：

Example Plnkr

Answer 1

一种可能性是ngModelOptions。您可以使用该指令告诉文本字段何时更新模型值，从而延迟实际绑定。

例如：ng-model-options="{ updateOn: 'blur' }"

文档HERE

或者作为替代方案，您可以创建一个动态模型，并且只有在按下回车键的情况下才将$ scope.dt绑定到控制器内的函数内。

<input ng-model="onTheFlyModel" ng-keypress="checkForEnter($event, onTheFlyModel)"/>

（现在在您的控制器中）

$scope.checkForEnter = function($event, onTheFlyModel){
    // Use $event object to check for enter.
    if(/*$event is enter key*/)
        $scope.dt = onTheFlyModel;
}

使用ui.bootstrap.datepicker-popup防止在按键上更改模型日期

1 个答案: