How to prevent a date picker to show multiple times?

cordova
1

Hello, sorry if its maybe a basic question. The field below when clicked shows a date picker.
http://ngcordova.com/docs/plugins/datePicker/

<input type="text" placeholder="Data" ng-disabled="buttonDisabled" ng-model="displayedSearchDate" ng-click="showDatePicker()"

The problem is that clicking fast multiple times on it will launch multiple istances of the datepicker.
I tried disabling the field after the first click but when the datetime picker shows up, if the user clicks the cancel button the field remains in the disabled state. I was not able to find how to hook in this “cancel button” event on the datepicker plugin.

               
 $scope.showDatePicker = function () {
                    $scope.buttonDisabled = true;
                    var datePickerOptions = {
                        date: new Date(),
                        mode: 'date', // or 'time'
                        minDate: moment().subtract(100, 'years').toDate(),
                        allowOldDates: true,
                        allowFutureDates: true,
                        doneButtonLabel: 'DONE',
                        doneButtonColor: '#F2F3F4',
                        cancelButtonLabel: 'CANCEL',
                        cancelButtonColor: '#000000'
                    };

                   
                    $ionicPlatform.onHardwareBackButton(function () {
                        $scope.buttonDisabled = false;
                    });

                    $cordovaDatePicker.show(datePickerOptions).then(function (date) {
                        $scope.buttonDisabled = false;
                        $scope.displayedSearchDate = moment(date).format('ddd D MMMM');
                        $scope.when.searchDate = moment(date).format('YYYY-MM-DD');

                    }, false);


                }

Any help / hint is very appreciated!
Fabio

2

Looking through the code i believe the “data” parameter will be “null” if the user clicked cancel.

E.g. original cordova datepicker code: https://github.com/VitaliiBlagodir/cordova-plugin-datepicker/blob/master/www/ios/DatePicker.js#L119
And ngCodova binding: https://github.com/driftyco/ng-cordova/blob/master/src/plugins/datepicker.js#L12

3

@jawache Thanks very much for your reply but for the moment still no luck. Hitting cancel the code in the “then” part is not executed.

I tried also to do like the following (as specified here https://github.com/VitaliiBlagodir/cordova-plugin-datepicker) , but with no success

function onSuccess(date) {
alert('Selected date: ’ + date);
}

function onError(error) { // Android only
alert('Error: ’ + error);
}

datePicker.show(options, onSuccess, onError);

4

Ok I finally cracked it. Don’t know if it’s the best solution but since I was unable to hook into the cancel event I used the $timeout trick as follows

ionic.Platform.ready(function () {
              
                $scope.when = {};
                $scope.where = {};
                $scope.where.place = null;

                //if the user click the back button before the datatepicker is shown the input field is reenabled
                $ionicPlatform.onHardwareBackButton(function () {

                    $scope.buttonDisabled = false;
                });

                //using timeout function in order to avoid showing the picker multiple times
                $scope.showDatePicker = function () {
                    $scope.buttonDisabled = true;
                    $timeout(show, 700);
                }

                function show() {
                    //restore the field after the interval
                    $scope.buttonDisabled = false;

                     var datePickerOptions = {
                        //date: new Date(),
                        mode: 'date', // or 'time'
                        minDate: moment().subtract(100, 'years').toDate(),
                        allowOldDates: true,
                        allowFutureDates: true,
                        doneButtonLabel: 'DONE',
                        doneButtonColor: '#F2F3F4',
                        cancelButtonLabel: 'CANCEL',
                        cancelButtonColor: '#000000'
                    };

                    $cordovaDatePicker.show(datePickerOptions).then(function (date) {
                        $scope.date = date;
                        $scope.displayedSearchDate = moment(date).format('ddd D MMMM');
                        $scope.when.searchDate = moment(date).format('YYYY-MM-DD');

                    });


                }