ngx-bootstrap for angular - datepicker how do i change the theme color when nothing seems to work

Question

I'm trying to change the color of the datepicker and it is not working

Here is the ngx-bootstrap datepicker https://valor-software.com/ngx-bootstrap/#/datepicker

This is my html template

         <div class="form-group">
                        <label class="col-sm-3 control-label" for="date">Date:</label>
                        <div class="col-sm-9">
                                <input type="text"
                                class="form-control"
                                [minDate]="minDate"
                                [maxDate]="maxDate"
                                #dp="bsDatepicker"
                                bsDatepicker [(bsValue)]="bsValue">
                                <button class="btn btn-success" (click)="dp.toggle()">Date Picker</button>
                        </div>
                    </div>

I was trying various things, I do realize that this applyTheme is a function

colorTheme = 'theme-green';

bsConfig: Partial<BsDatepickerConfig>;

  applyTheme(pop: any) {
  // create new object on each property change
  // so Angular can catch object reference change
  this.bsConfig = Object.assign({}, { containerClass: this.colorTheme });
  setTimeout(() => {
    pop.show();
  });
}

Answer 1

You are not calling that function. Do this instead

1. Add a call in your input html element

    [bsConfig]="dpConfig" 

Next add to component above constructor

public dpConfig: Partial<BsDatepickerConfig> = new BsDatepickerConfig();

Inside constructor:

this.dpConfig.containerClass = 'theme-dark-blue'; //or whatever color

Answer 2

Add the following lines in global styling file: styles.scss

.bs-datepicker-body table td.week span 
{
  color: #2dfbcd !important; 
}

.bs-datepicker-body table td span.selected,
.bs-datepicker-head,
.bs-datepicker-head, .bs-datepicker button:active,
.bs-datepicker-body table td.selected span,
.bs-datepicker-body table td span[class*="select-"]:after,
.bs-datepicker-body table td[class*="select-"] span:after,
.bs-datepicker-body table td.active-week span:hover 
{
  background-color: #2dfbcd !important; 
}

Answer 3

Adding [bsConfig]="{containerClass:'theme-default'}" to my component html file works fine for me.

The input element after addition of theme configuration:

<input type="text"
        placeholder="Select Time"
        class="form-control"
        bsDatepicker
        [bsConfig]="{containerClass:'theme-default'}"
        [(ngModel)]="startDateTime" (ngModelChange)="onStartDateTimeChange($event)">

I am using ngx-bootstrap version 3.2.0 with Angular 7.2.4

Answer 4

Add the following line in angular.json styles

          "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",

Answer 5

We can directly go to bs-datepicker.config.js file and there just change:

this.containerClass = 'theme-dark-blue';

or whatever color you want.

Answer 6

-> ngx bootstrap DatePicker

component.ts (Set DatePicker configurations)

//ngxBootstrap datePicker config
bsConfig:Partial<BsDatepickerConfig> = {
  containerClass:'theme-red',
  dateInputFormat:'DD MMM YYYY'
}

template.html

  <input type="text" class="form-control" placeholder="Date Of Birth"
         name="dateOfBirth" formControlName="dateOfBirth"
         bsDatepicker [bsConfig]="bsConfig"
         [ngClass]="{'is-invalid':f.dateOfBirth.touched && f.dateOfBirth.errors}">