ngx-bootstrap for angular - datepicker如何在没有任何效果时更改主题颜色

时间:2018-01-17 18:39:28

标签: javascript angular datepicker ngx-bootstrap

我试图更改日期选择器的颜色并且无法正常工作

这是ngx-bootstrap datepicker https://valor-software.com/ngx-bootstrap/#/datepicker

这是我的html模板

         <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>

我正在尝试各种各样的事情,我确实意识到这个applyTheme是一个函数

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();
  });
}

4 个答案:

答案 0 :(得分:5)

您没有调用该功能。这样做

  1. input html元素中添加一个电话

    [bsConfig]="dpConfig"
    
  2. 接下来添加到构造函数

    之上的组件
    public dpConfig: Partial<BsDatepickerConfig> = new BsDatepickerConfig();
    

    内部构造函数:

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

答案 1 :(得分:2)

在全局样式文件中添加以下行: 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; 
}

答案 2 :(得分:1)

添加      [bsConfig]="{containerClass:'theme-default'}"到我的组件html文件对我来说很好。

添加主题配置后的输入元素:

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

我正在将ngx-bootstrap版本3.2.0与Angular 7.2.4一起使用

答案 3 :(得分:-1)

我们可以直接转到bs-datepicker.config.js文件,只需更改:

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

或你想要的任何颜色。