ngCordova Datepicker Show Twice

ionic-v1
1

So im using the datepicker with ngCordova. The first time i call the datepicker everything works fine but when i call it a second time I receive the error:

Error: undefined is not a function (evaluating 'date.getFullYear()')

Here is the snippet:

<label type="text" ng-model="user.birthday" ng-click="showDatePicker1()">mm/dd/yyyy</label>

  var options = {
    date: new Date(),
    mode: 'date', // or 'time'
    allowOldDates: true,
    allowFutureDates: false,
    doneButtonLabel: 'DONE',
    doneButtonColor: '#F2F3F4',
    cancelButtonLabel: 'CANCEL',
    cancelButtonColor: '#000000'
  };

  $scope.showDatePicker1 = function() {
    $cordovaDatePicker.show(options).then(function(date){
        alert(date);
    });
  }
2 Likes
2

Still having this issue. Someone save me!

1 Like
4

I fixed it by adding this to the options object:

minDate: new Date(),

Try to set a minDate, maybe this fixes the problem for you too.

5

If i add:

Date: new Date() - 10000,

It wont even come up once.

Error: undefined is not a function (evaluating 'date.getFullYear()')
6

Yes. The fault is that you’ve used the example from the docs, which is not working.

Try the following on your browser’s command line:

console.log(typeof new Date(), typeof (new Date() - 1000));

for me this returns:

object number

That means; by subtracting 1000 from an object - you “killed it” by changing it’s type to number. Just try your code after removing the subtraction and the number. It surely will work. But now you will face the problem that you can’t choose another date than today, since the Date object always instantiates on the current date by default.

To be honest, the native handling of dates is pretty weird in JavaScript, so I decided to solve this problem by additionally using moment.js. Here is my options object:

var options = {
	date: new Date(),
	mode: 'date',
	minDate:  moment().subtract(100, 'years').toDate(),
	allowOldDates: true,
	allowFutureDates: false,
	doneButtonLabel: 'Done',
	doneButtonColor: '#000000',
	cancelButtonLabel: 'Abort',
	cancelButtonColor: '#000000'
};

For the minDate property I’m subtracting 100 years because this is the date range I want my users to be able to choose from.

Please give me feedback if this solved the problem for you!

7

First thank you for working on this with me. Unfortunately Im still receiving the same error. Everything works great the first time. Try to bring up datepicker again and same error.

Im using Ionic 1.0.0-beta.14 and ngCordova 0.1.11-alpha in the iOS Simulator.

Current code in controller.

var options = {
  date: new Date(),
  mode: 'date',
  minDate:  moment().subtract(100, 'years').toDate(),
  allowOldDates: true,
  allowFutureDates: false,
  doneButtonLabel: 'Done',
  doneButtonColor: '#000000',
  cancelButtonLabel: 'Abort',
  cancelButtonColor: '#000000'
};

$scope.showDatePicker1 = function() {
  $cordovaDatePicker.show(options).then(function(date){
    alert(date);
  });
}

showDatePicker1 is being called from template

<label type="text" ng-model="user.birthday" ng-click="showDatePicker1()">mm/dd/yyyy</label>
9

I’ve been able to fix it!

But the solution isn’t perfect. I can’t yet explain why this is happening (I guess some sort of weird referencing issue) - but it works, if you move the definition of the options variable into the showDatePicker function.

This is how I fixed your code:

$scope.showDatePicker = function () {
	var options = {
		date: new Date(),
		mode: 'date',
		minDate:  moment().subtract(100, 'years').toDate(),
		allowOldDates: true,
		allowFutureDates: false,
		doneButtonLabel: 'Done',
		doneButtonColor: '#000000',
		cancelButtonLabel: 'Abort',
		cancelButtonColor: '#000000'
	};

	$cordovaDatePicker.show(options).then(function(date){
		alert(date);
	});
};

Please give me feedback if this solved the problem for you!

P.S.: If you’ve been able to find out why it didn’t work in the first place I’d appreciate an explanation :wink:

3 Likes
10

Well that turned out to be easy! That fixed it!

All i can say is now options will be instantiated on every click, not once like before.

Thanks for all the help.

11

I’ve found that the Android part of this plugin expects to receive an integer, while the iOS one expects to receive a Date object. So to make them both work you’ll need something like this:

minDate = ionic.Platform.isIOS() ? new Date() : (new Date()).valueOf();

datePickerOptions = {
  date: new Date(),
  minDate: minDate,
  mode: 'date'
};
4 Likes
12

Working for me :smiley: Thanks

13

@javiercr you rock! Lost days looking for this answer. The ngCordova/cordova-plugin-datepicker docs need to be updated immediately.

14

please solve this issue
@tmuecksch cordova plugin add https://github.com/VitaliiBlagodir/cordova-plugin-datepicker i used this plugin in my sample app
i am getting date and time picker when first time set the date and time not showing in view if again click the text box it shows previous date and time in view when user click the text box this method will be called $scope.calendarData = function() {
alert(“hi”);

            var options = {
                date: new Date(),
                mode: 'date'
                };
            datePicker.show(options, function(date) {
                var monthName = "";
                switch (date.getMonth()) {
                    case 1:
                        monthName = "Jan";
                        break;
                    case 2:
                        monthName = "Feb";
                        break;
                    case 3:
                        monthName = "Mar";
                        break;
                    case 4:
                        monthName = "Apr";
                        break;
                    case 5:
                        monthName = "May";
                        break;
                    case 6:
                        monthName = "Jun";
                        break;
                    case 7:
                        monthName = "Jul";
                        break;
                    case 8:
                        monthName = "Aug";
                        break;
                    case 9:
                        monthName = "Sept";
                        break;
                    case 10:
                        monthName = "Oct";
                        break;
                    case 11:
                        monthName = "Nov";
                        break;
                    case 12:
                        monthName = "Dec";
                        break;
                }
                var day = "";
                switch (date.getDay()) {
                    case 0:
                        day = "Sun";
                        break;
                    case 1:
                        day = "Mon";
                        break;
                    case 2:
                        day = "Tue";
                        break;
                    case 3:
                        day = "Wed";
                        break;
                    case 4:
                        day = "Thu";
                        break;
                    case 5:
                        day = "Fri";
                        break;
                    case 6:
                        day = "Sat";
                        break;
                }
                $scope.calendar.register = day + ", " + date.getDate() + " " + monthName + " " + date.getFullYear();
                    alert($scope.calendar.startTime);
                var options1 = {
                    date: new Date(),
                    mode: 'time'
                };
                datePicker.show(options1, function(date) {

                    var format;
                    var hours;
                    if (date.getHours() < 12) {
                        hours = date.getHours();
                        format = "AM";
                    } else {
                        hours = date.getHours() - 12;
                        format = "PM";
                    }

                    $scope.register += " " + hours + ":" + date.getMinutes() + " " + format;
                   

                });
            });
        
    };

i binded date and time value to ng-model: $scope.register here first i am getting time, before getting the time i have to select the datepicker. In this situation Can i use call back functions here.How
to write call back functions in ionic

15

I found out today that the date attribute was the troubling matter, at least in my case. What I did was just update date attribute every time the function that shows the datepicker triggers.

I’ll look further into it tomorrow

16

Could you tell why my calendar is showing with the wrong date?
If you see October 6 is today (Thursday - the Q letter), but it is showing as today (Thursday) was October 7.
The language used is Portuguese from Braszil by the way.

image
wrong_date_calendar.png1280Ă—720 721 KB

17

Sorry for that message but I found the solution right here in this same discussion:
minDate: moment().subtract(100, 'years').toDate(),

1 Like