Question

我在我的应用中成功使用了UI Bootstrap Datepicker Popup。我现在要求调用一个函数（如果用户从弹出窗口中选择了一个日期或者输入完成日期，那么在将日期翻译成下一个星期日后如果它不是星期天那么会产生相当昂贵的API调用）从键盘。

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

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

这是我对datepicker

的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（）函数。但是，它也会在用户执行按键事件时触发。

例如，如果显示的日期是8/15/16，并且用户想要从8月15日到8月23日更改它。用户可能想要选择＆＃39; 15＆＃39;并键入＆＃39; 23＆＃39;。不幸的是，ng-change将由＆＃39; 2＆＃39;触发。按键，不给他们机会进入＆＃39; 3＆＃39;。

如果按下回车键，用户发出信号完成后，如何等待键盘输入？

Answer 1

我解决了这个问题：

在控制器中：

$scope.change = function(search) {

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

 };

在视图中：

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

Answer 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

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

2 个答案: