UI Bootstrap Datepicker - 从键盘或弹出窗口中选择日期时调用函数答案

【问题标题】：UI Bootstrap Datepicker - Call function when date selected from keyboard or popupUI Bootstrap Datepicker - 从键盘或弹出窗口中选择日期时调用函数
【发布时间】：2016-12-11 07:09:19
【问题描述】：

我在我的应用程序的其他地方成功使用了 UI Bootstrap Datepicker Popup。我现在需要调用一个函数（如果它不是星期天，则在将日期转换为下一个星期日后进行相当昂贵的 API 调用），当用户从弹出窗口中选择一个日期或完成输入一个日期时键盘。

我目前有一个调用该函数的搜索按钮，但新的要求是删除搜索按钮并在选择新日期时进行搜索。

我的逻辑设计是在弹出日期选择或返回/回车键按键上调用我的函数以指示键盘输入已完成。

这是我用于日期选择器的 HTML

<div class="input-group">
  <input type="text" name="datePicker" id="datePicker"
    class="form-control"
    ng-model="$ctrl.dateValue"
    ng-change="$ctrl.onChange($ctrl.dateValue)"
    uib-datepicker-popup="{{$ctrl.config.format}}"
    datepicker-options="$ctrl.config.options"
    is-open="$ctrl.config.opened"
    close-text="Close">

  <span class="input-group-btn">
    <button type="button" id="datePickerButton"
      class="btn btn-primary"
      ng-click="$ctrl.openDatePicker()">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
</div>

当日期从日期选择器弹出窗口更改时，这会正确调用我的 $ctrl.onChange() 函数。但是，它也会在用户执行按键事件时触发。

例如，如果显示的日期是 2016 年 8 月 15 日，并且用户想要将其从 8 月 15 日更改为 8 月 23 日。用户可能想要选择“15”并输入“23”。不幸的是，ng-change 将通过“2”按键触发，并且不会让他们有机会输入“3”。

如何等待键盘输入，直到用户通过按回车键发出完成信号？

【问题讨论】：

标签： angular-ui-bootstrap

【解决方案1】：

我是这样解决的：

在控制器中：

$scope.change = function(search) {

        if(event) {
            if (event.type==="click") {
                if (search==="yourControl") {
                    dosomething()
                }   
            }
        }

 };

在视图中：

ng-change="ctrl.change('yourControl')"

【讨论】：

在视图中还有：ng-enter="ctrl.enter()" 用于捕捉键盘输入

【解决方案2】：

调用 ng-change="changefun();"在输入。

<p class="input-group" style="padding-top:5px;">
    <input type="text" uib-datepicker-popup="dd/MM/yyyy" style="width:165px; height:34px;" ng-change="changefun();" class="form-control" ng-model="myDate" is-open="isOpened" " datepicker-options="Options" calendarWeeks="false" close-text="Close" required/>
    <span class="input-group-btn" style="float:left">
      <button style="height:34px; padding-right:0;" type="button" ng-click="Open()" class="btn btn-default">
        <img border="0" src="/_layouts/15/images/calendar_25.gif?rev=23" />
      </button>
    </span>
</p>

更多详情请参考link

【讨论】：