CODEWITHSUNDEEP
angular-ui-bootstrap
Jim
Jim

Reputation: 83

UI Bootstrap Datepicker - Call function when date selected from keyboard or popup

I'm using the UI Bootstrap Datepicker Popup elsewhere in my apps successfully. I now have the requirement to call a function (which makes a fairly expensive API call after translating the date to the next Sunday if it isn't a Sunday) when the user has either selected a date from the popup or FINISHED entering a date from the keyboard.

I currently have a search button that calls the function, but the new requirement is to remove the search button and search when a new date has been selected.

My logical design is to call my function on a popup date selection OR a return/enter key keypress to indicate keyboard input is complete.

Here's the HTML I have for the datepicker

<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>

This correctly calls my $ctrl.onChange() function when the date has changed from the date picker popup. However it also triggers as the user is performing keypress events.

For example if the date displayed is 8/15/16 and the user wants to change it from Aug 15 to Aug 23. The user may want to select the '15' and type '23'. Unfortunately the ng-change will be triggered with the '2' keypress and not give them the chance to enter the '3'.

How do I wait on keyboard input until the user signals they are complete by pressing the enter key?

Upvotes: 0

Views: 1979

Answers (2)

Amay Kulkarni
Amay Kulkarni

Reputation: 838

call ng-change="changefun();" on input. 

<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>

Refer link for more detail

Upvotes: 0

GDM_70
GDM_70

Reputation: 31

I solved it like this :

in the controller :

$scope.change = function(search) {

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

 };

in the view :

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

Upvotes: 3

Related Questions