web-dev-qa-db-fra.com

ngx-bootstrap for angular - datepicker comment puis-je changer la couleur du thème quand rien ne semble fonctionner

J'essaie de changer la couleur du sélecteur de date et cela ne fonctionne pas

Voici la datepicker ngx-bootstrap https://valor-software.com/ngx-bootstrap/#/datepicker

Ceci est mon modèle 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>

J'essayais diverses choses, je me rends compte que ce thème est une fonction

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();
  });
}
javascriptangulardatepickerngx-bootstrap
8
Scott Leary

Vous n'appelez pas cette fonction. Faites cela à la place

  1. Ajoutez un appel dans votre élément input html

    [bsConfig]="dpConfig"

Ajouter ensuite au composant au-dessus du constructeur

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

Constructeur intérieur:

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

Ajoutez les lignes suivantes dans le fichier de style global: 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; 
}
7
navule

Ajouter [bsConfig]="{containerClass:'theme-default'}" à mon fichier html de composant fonctionne très bien pour moi.

L'élément d'entrée après l'ajout de la configuration du thème:

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

J'utilise la version ngx-bootstrap 3.2.0 avec Angular 7.2.4

4
Orkun Tuzel

On peut aller directement à bs-datepicker.config.js fichier et il suffit de changer:

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

ou quelle que soit la couleur que vous souhaitez.

0
Bharat Sahu