Ionic 2 date-time component alignment

I’m wanting to left align a date-time component under a stacked label - my top two text fields are aligned left under the labels but the last two fields (both date-time components) are centered. Anyone know the correct way of doing this? (styling not my strong point!)

<ion-item>
  <ion-label stacked>From</ion-label>
  <ion-input id="journey_from" name="journey_from"  type="text" placeholder=""></ion-input>
</ion-item>

<ion-item>
  <ion-label stacked>To</ion-label>
  <ion-input id="journey_to" name="journey_to"  type="text" placeholder=""></ion-input>
</ion-item>

<ion-item>
  <ion-label stacked>Date</ion-label>
  <ion-datetime id="date" displayFormat="DD/MM/YYYY" pickerFormat="DD MMMM YYYY" [(ngModel)]="journeySearch.date"></ion-datetime>
</ion-item>

<ion-item>
  <ion-label stacked>To</ion-label>
  <ion-datetime displayFormat="hh:mm A" pickerFormat="hh:mm:A" [(ngModel)]="journeySearch.time"></ion-datetime>
</ion-item>

Could you open an issue to add this. It doesn’t look like this kind of layout is setup at the moment.

Doh! Sorted it, I had a typo in my scss file so it wasn’t picking up the date-time component

yeah ok, I think I got round what I wanted to do though.

@mhartington actually it hasn’t worked. I am still having problems aligning the components.

You shouldnt have to do anything styling wise to get the default behavior. Did you open an issue on Github?

hey how we compare two date?
like start date not more than to end date … or end date not more than to current date like this.

i already open this topic.check below link

have we got any solution of this?

This is my solution

	// right aligh datetime
.item-datetime ion-label {
	-webkit-flex: initial;
	-ms-flex: initial;
	flex: initial;
	max-width: 200px;
	pointer-events: none;
}

.datetime-text:empty:not(:focus):before{
	content: "Data di nascita*";
	color: #999;
}
1 Like

i will try this surely.
Thanks

.item-datetime ion-datetime {
        text-align: right;
    }

Hello! I have within an item one ion-label, one ion-datetime and one ion-icon. But i don’t want that your css don’t apply my ion-icon. How it would be? Thank, this is my code.

<ion-item>
      <ion-label fixed>Año de nacimiento</ion-label>
      <ion-datetime formControlName="birthday_year" name="birthday_year" displayFormat="YYYY" max="2002" [(ngModel)]="user.birthday_year" required></ion-datetime>
      <ion-icon item-rigth class="iconCheck" name="checkmark" color="secondary" *ngIf="formUpdateUser.get('birthday_year').status == 'VALID'"></ion-icon>
</ion-item>
.item-datetime ion-label {
     -webkit-flex: initial;
     -ms-flex: initial;
     flex: initial;
     max-width: 200px;
     pointer-events: none;
}
.datetime-text:empty:not(:focus):before {
     content: "Data di nascita*";
     color: #999;
 }