angular ngx-material-timepicker can't customize

user_12267205 0
Viewed 6737

I try to use ngx-material-timepicker like code below but I can't change any CSS classes I'm following this link https://www.npmjs.com/package/ngx-material-timepicker

This is my code

 <div class="clock">
    <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly />
                  <ngx-material-timepicker
                    [appendToInput]="true"
                    [disableAnimation]="true"
                    [theme]="oktTheme"
                    (timeSet)="onTimeset($event)"
                    #fullTime
                  ></ngx-material-timepicker>
  </div>

this is ts code

  oktTheme = {
    container: {
      bodyBackgroundColor: "#424242",
      buttonColor: "#fff"
    },
    dial: {
      dialBackgroundColor: "#555"
    },
    clockFace: {
      clockFaceBackgroundColor: "#555",
      clockHandColor: "#01806b",
      clockFaceTimeInactiveColor: "#fff"
    }
  };
timepicker angular-material angular styling
2 Answers

solve this problem whit add custome class to directive and set it in style.scss by using inner directive classes

html

 <div class="clock">
                  <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly />
                  <ngx-material-timepicker
                    [appendToInput]="true"
                    [disableAnimation]="true"
                    [theme]="oktTheme"
                    [timepickerClass]="'custome-class'"
                    (timeSet)="onTimeset($event)"
                    #fullTime
                  ></ngx-material-timepicker>
</div>

style.scss

.custome-class {
  direction: ltr;
  .timepicker__header {
    padding: 0px 30px !important;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
  }
  .timepicker-dial__control {
    font-size: 20px !important;
  }

  .timepicker-dial {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    height: 44px;
  }
}
user_122672050

place this in your SCSS file (in app.component.scss or your specific component)

do this in your scss file

::ng-deep ngx-material-timepicker-content{
  --body-background-color: #fff;
  --primary-font-family: 'Roboto',sans-serif;
  --button-color: #c6ff00 !important;
  --dial-active-color: #fff;
  --dial-inactive-color: rgba(255, 255, 255, .5);
  --dial-background-color: #c6ff00 !important;
  --dial-editable-active-color: #c6ff00 !important;
  --dial-editable-background-color: #fff;
  --clock-face-time-active-color: #fff;
  --clock-face-time-inactive-color: #6c6c6c;
  --clock-face-inner-time-inactive-color: #929292;
  --clock-face-time-disabled-color: #c5c5c5;
  --clock-face-background-color: #f0f0f0;
  --clock-hand-color: #c6ff00 !important;
}
user_122124190
Related