Ionic-framework: <ion-datetime> - several cosmetic issues

[keithdmoore]

When using the Ionic2 datetime aka ion-datetime component with ion-item and ion-label, there are several cosmetic issues.

Issue 1. When using a stacked label, upon selecting a date, the date is placed in the center of the input field. I expect the date to be left justified under the label like other inputs do.

  <ion-item>
    <ion-label stacked>Date and Time1</ion-label>
    <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
  </ion-item>

Issue 2. When using a normal ion-label, it looks like the label is bolded and the font size is larger. I would expect the label styling to remain in tact when an ion-datetime component is placed under it. See sample code below issue 3.

Issue 3. Also, note the date starts to get truncated too early. Seems like it could be adjusted so that it starts to truncate when the date is closer to the label.

  <ion-item>
    <ion-label>Date and Time2</ion-label>
    <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate2"></ion-datetime>
  </ion-item>   

Here is a plunker that demonstrates the issues. Just select some dates for the date fields.

http://plnkr.co/edit/hxJ3TprMA5Aq2pwi0Fbv?p=preview

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.5
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v5.8.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[keithdmoore]

@jgw96 Would you please remove the ios label and add the datetime label? Thanks!

[keithdmoore]

@adamdbradley Any chance of this making it into the beta8 milestone? This is the only remaining issue I have seen with this component. Thanks for making Ionic2 great!

[danbucholtz]

Hey @keithdmoore,

Thanks for submitting the issues 👍 . No promises on the beta 8 timeframe, but we'll tackle this asap!

Thanks,
Dan

[brandyscarney]

Thanks for the issue! This will be fixed in the beta 9 release, but if you'd like to check it out sooner I released a nightly version:

npm install --save [email protected]

:smile:

[keithdmoore]

Oh Brandy, I am so in love with you! You rock!

[basvdijk]

Thanks for reporting, had the same issue