As you are reaching here you might be knowing that with the release of Ionic 6, the datetime picker component (ion-datetime) has been completely revamped.
It is now showed as inline rather in an overlay which it used to, in its previous versions like Ionic 5 or Ionic 4 or later. This change is being appreciated due to flexibility, modern styling and developer friendly features.
However some of you might be wondering how to use this new inline ionic 6 date picker component. Don’t worry as we will be sharing different ways you can implement and use this new component as per your use case in your angular project.
<ion-list> <ion-accordion-group> <ion-accordion value="start"> <ion-item slot="header"> <ion-label>Accordion</ion-label> <ion-note slot="end">{{dateExample | date}}</ion-note> </ion-item> <ion-datetime slot="content" displayFormat="MMMM YY" [(ngModel)]="dateExample" size="cover" presentation="date" ></ion-datetime> </ion-accordion> </ion-accordion-group> </ion-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], }) export class AppComponent { dateExample = new Date().toISOString(); constructor() {} }
<ion-list> <ion-item id="open-modal"> <ion-label>Modal - Date selection</ion-label> <ion-note slot="end">{{dateExample | date}}</ion-note> </ion-item> <ion-modal trigger="open-modal" [cssClass]="'center'"> <ng-template> <ion-datetime presentation="date" [(ngModel)]="dateExample" size="cover" ></ion-datetime> </ng-template> </ion-modal> </ion-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], }) export class AppComponent { dateExample = new Date().toISOString(); constructor() {} }
ion-modal { &.center { --width: calc(100% - 2em); align-items: center; --height: auto; .ion-page { position: relative; display: block; contain: content; } } }
<ion-list> <ion-item id="open-modal2"> <ion-label>Modal - Date selection</ion-label> <ion-note slot="end">{{dateExample | date}}</ion-note> </ion-item> <ion-modal trigger="open-modal2" [cssClass]="'bottom-end'"> <ng-template> <ion-datetime presentation="date" [(ngModel)]="dateExample" size="cover" [showDefaultButtons]="true" ></ion-datetime> </ng-template> </ion-modal ></ion-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], }) export class AppComponent { dateExample = new Date().toISOString(); constructor() {} }
ion-modal { &.bottom-end { align-items: flex-end; --height: auto; .ion-page { position: relative; display: block; contain: content; } } }
<ion-list> <ion-item id="open-modal3"> <ion-label>Modal - Time selection</ion-label> <ion-note slot="end">{{dateExample | date: 'HH:mm'}}</ion-note> </ion-item> <ion-modal trigger="open-modal3" [cssClass]="'bottom-end'"> <ng-template> <ion-datetime presentation="time" [(ngModel)]="dateExample" size="cover" [showDefaultButtons]="true" ></ion-datetime> </ng-template> </ion-modal> </ion-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], }) export class AppComponent { dateExample = new Date().toISOString(); constructor() {} }
ion-modal { &.bottom-end { align-items: flex-end; --height: auto; .ion-page { position: relative; display: block; contain: content; } } }
<ion-list> <ion-item> <ion-label>Popover - Date selection</ion-label> <ion-note slot="end" id="open-popover1">{{dateExample | date}}</ion-note> </ion-item> <ion-popover trigger="open-popover1" cssClass="width-80"> <ng-template> <ion-datetime presentation="date" [(ngModel)]="dateExample" size="cover" ></ion-datetime> </ng-template> </ion-popover> </ion-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], }) export class AppComponent { dateExample = new Date().toISOString(); constructor() {} }
ion-popover { &.width-80 { --width: 80%; } }
<ion-list> <ion-item> <ion-label>Popover - Time selection</ion-label> <ion-note slot="end" id="open-popover2" >{{dateExample | date: 'HH:mm'}}</ion-note > </ion-item> <ion-popover trigger="open-popover2" cssClass="width-80"> <ng-template> <ion-datetime presentation="time" [(ngModel)]="dateExample" size="cover" ></ion-datetime> </ng-template> </ion-popover> </ion-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], }) export class AppComponent { dateExample = new Date().toISOString(); constructor() {} }
ion-popover { &.width-80 { --width: 80%; } }
The versatility of this component is amazing and has so many use cases. We tried to cover all possible ways around where you can use this component. You can extend the examples above by changing the presentation property as per your use cases. We have listed all possible presentation inputs you can have :
This article shows how to add a VPC (Virtual Private Cloud) connector to your Laravel…
View Comments
Your posts are really helpful. Please write some more posts for ionic. That would be really helpful for the community.
Sure Vineet, thanks for the motivating comment
I got this error
[error] - ERROR {"code":1352}
when I click to open modal
Which Ionic version are you using ?