CODEWITHSUNDEEP
angulartypescriptionic3
Sampath
Sampath

Reputation: 65978

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>

Upvotes: 0

Views: 4477

Answers (2)

Z. Bagley
Z. Bagley

Reputation: 9270

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.

Upvotes: 4

Vignesh
Vignesh

Reputation: 1222

I think i have got it 

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

Upvotes: 0

Related Questions