I have implemented the datepicker-popup from Angular-UI Bootstrap in my application.
Currently, when the user clicks and types in the text input field, $scope.dt gets updated with each keypress, causing the cursor position to reset to the end of the string. This makes it challenging for users to enter or modify the selected date using the keyboard.
My question is: Is there an easy way to change the behavior of the text input so that $scope.dt doesn't change until the user presses the Enter key?
The following code snippet shows the standard usage of the 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>
If you need to see a working example, check out this Plnkr link: