Styling ion-datetime picker

Ionic Framework ionic-v3
1

Hi all - I’m using the ion-datetime control in my app and it’s functioning perfectly. However I’ve been unable to find a way to style the picker that comes up from the bottom of the screen after touching the ion-datetime component.

Is styling of the picker possible? I’m hoping this is simply due to my relatively nascent understanding of CSS!!

Thanks in advance,
Chris

2

Hi,

did you find a solution to this?

I am trying this: .picker-md, .picker-toolbar { background: #012384; }
not working!

3

I did not - ended up just rolling with the default. I would definitely be interested to hear if you find a solution though!!
Chris

4 
 .picker-columns,
 .picker-toolbar,
 .picker-md .picker-wrapper,
 .picker-md .picker-toolbar
  {
  //background: map-get($colors,primary-dark);
  background: url(../assets/images/background2.png);
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
.picker-md .picker-prefix,
.picker-md .picker-suffix,
.picker-md .picker-opt.picker-opt-selected {
  color: #fff;
  font-family: Montserrat-Medium;
}
.picker-md .picker-opt {
    color: map-get($colors,grisclair);
    font-family: Montserrat-Light;
}

.picker-md .picker-button,
.picker-md .picker-button.activated {
  color: #fff;
  font-family: Montserrat-Regular;
}

i use google chrome dev tools to find the classes of the picker interface.
and this is my cssCode in app.scss . I am able to add a background image, change font, size and color.

5 Likes
5

Brilliant! Very nicely done - I will definitely make use of this in the next version to style the picker appropriately. Thank you for sharing!

Chris