Sampath Sampath - 26 days ago 5
TypeScript Question

Right align Ionic datetime picker's date on the label

Do you have any clue to right align Ionic date picker. I have tried with

float-right
and
float-end
. But no luck :(

Note: I need to
right align
the final date on the
label
.

You can play with stackblitz

<ion-list>
<ion-item>
<ion-label fixed>Compl. Date</ion-label>
<ion-datetime displayFormat="D MMM, YYYY" [(ngModel)]="completionDate" float-end></ion-datetime>
</ion-item>
</ion-list>

Answer Source

The only possible way to maintain clickability of the label while aligning the datetime on the right (without additional custom code) is to have the date-time take up full 100% width and then text-align right as shown below.

<ion-list>
    <ion-item>
        <ion-label fixed>Compl. Date</ion-label>
        <ion-datetime  style="width: 100%; text-align: right;"displayFormat="D MMM, YYYY" [(ngModel)]="completionDate"></ion-datetime>
    </ion-item>
</ion-list>

You could also use position: absolute; right: 0; instead of the full width + text-align, but then you'd have to create a custom click function for the label to activate the date picker modal.