Ionic Date Picker colour

tutorials
1

I’ve just written a quick bit of scss styling for ionic-datepicker by rajeshwarpatlolla so thought I’d share :slight_smile:

If you want to override the colour for the datepicker, just use this and replace the YOUR_COLOUR_HERE with a colour…

.ionic_datepicker_popup {
  $date-picker-colour: YOUR_COLOUR_HERE;

  .selected_date_full,
  .selected_date,
  .popup-buttons .button {
    background-color: $date-picker-colour !important;
  }
  .month_select,
  .year_select,
  .today {
    border-color: $date-picker-colour !important;
  }
  .item-select:after,
  .button-clear {
    color: $date-picker-colour !important;
  }
}
2 Likes
2

Thank you so much for your post.

1 Like
3

Hi

I added this snippet to my ionic.app.scss but the datepicker is still green.

.ionic_datepicker_popup {
  $date-picker-colour: #387ef5;

  .selected_date_full,
  .selected_date,
  .popup-buttons .button {
    background-color: $date-picker-colour !important;
  }
  .month_select,
  .year_select,
  .today {
    border-color: $date-picker-colour !important;
  }
  .item-select:after,
  .button-clear {
    color: $date-picker-colour !important;
  }
}