ion-datetime-picker icon indicating copy to clipboard operation
ion-datetime-picker copied to clipboard

Customize Colors of Datepicker

Open Bratkartoffl opened this issue 8 years ago • 1 comments

Ist ist possible to customize the color of the Datepicker elements? By default they are blue, but i want to have them Green as well as the OK Button. How can I achieve this?

Bratkartoffl avatar Jan 11 '17 11:01 Bratkartoffl

Hi, yeah, it would be nice to be able to change colors using sass variables, just as ionic allows. Let's file this as enhancement for the next version 👍

For now, you can use simple sass (or css) cascade to use your colors:

.ion-datetime-picker {
  .calendar .day {
    &:hover, &.activated, &.today:hover, &.today.activated {
      background-color: #bdf;
    }
    &.today {
      background-color: #e4e4e4;
    }
    &.selected, &.selected:hover, &.selected.activated {
      background-color: #387ef5;
      color: white;
    }
    &.disabled, &.disabled:hover, &.disabled.activated {
      background-color: #ccc;
    }
  }
  .month-year .item-input input.ng-invalid {
    background-color: #ffe4ea;
  }
  .time {
    .colon {
      color: #999;
    }
    .item-input input.ng-invalid {
      background-color: #ffe4ea;
    }
  }
}

katemihalikova avatar Jan 11 '17 12:01 katemihalikova