Can't get Ionic's datetime picker to work and showup even

0
votes

check example on docs: https://ionicframework.com/docs/v2/api/components/datetime/DateTime/ and https://ionicframework.com/docs/v2/components/#datetime

I'm making mobile-app with ionic+angular+cordova in VS. And I want to use simple datetime picker they have on their docs, with year, month & day. As those native looking scrollable selectors.

I've tried this in my page:

<ion-item>
    <ion-label>Date:</ion-label>
    <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="myDate"></ion-datetime>
</ion-item>

and js:

$scope.myDate = new Date();
$scope.myDate.toISOString();

But nothing else shows up except ion-item and ion-label. How do I make the 'ion-datetime'-element work?

2
angularjsdatetimeionic-frameworkdatetimepicker
try this $scope.myDate = new Date().toISOString(); – Issam El-atif
@IssamELATIF well that just shorten's the code, but It doesn't show the ion-datetime-element still, that's the problem. – J-ho
Why displayFormat is uppercase YYYY-MM-DD? It should be yyyy-MM-dd – Issam El-atif
@IssamELATIF because example is in that format. I tried changing it to displayFormat="yyyy-MM-dd" still not showing :( – J-ho
Ionic 2 is built on top of Angular 2 and Angular 2 is using this instead of $scope . try this.myDate = new Date().toISOString(); – Issam El-atif

2 Answers

0
votes

I was using wrong version of Angular and Ionic(1.3). I need to use atleast Ionic 2 and AngularJS 2 to make the datetimepicker work. Other choice is to add it through plugins..

0
votes

The documentation link you provide is for Ionic 2

Ionic 2 is built on top of Angular 2 and Angular 2 is using this instead of $scope . try this.myDate = new Date().toISOString();

If you are not using Ionic 2 but Ionic 1 change [(ngModel)]="myDate" to ngModel="myDate". Your page should look like 

<ion-item>
    <ion-label>Date:</ion-label>
    <ion-datetime displayFormat="YYYY-MM-DD" ngModel="myDate"></ion-datetime>
</ion-item>