📜  Bs 日期选择器颜色更改 - 无论代码示例

📅  最后修改于: 2022-03-11 14:59:43.955000             🧑  作者: Mango

代码示例1
BsDatepickerModule.forRoot()
bsDatepicker [bsConfig]="{ dateInputFormat: 'MMMM Do YYYY',adaptivePosition: true }"
bsDaterangepicker [bsConfig]="{ dateInputFormat: 'MMMM Do YYYY',adaptivePosition: true }"

// Format
YYYY-MM-DD                // 2021-10-06
MM/DD/YYYY                // 10/06/2021
MMMM Do YYYY,h:mm:ss a    // October 14th 2021, 6:15:34 pm

// Configuration
adaptivePosition: boolean;    // Sets use adaptive position
isAnimated: boolean;        // Turn on/off animation
showWeekNumbers: boolean;    // Allows to hide week numbers in datepicker
daysDisabled?: number[];    // Disable specific days, e.g. [0,6] will disable all Saturdays and Sundays
datesDisabled?: Date[];        // Disable specific dates
datesEnabled?: Date[];        // Enable specific dates
containerClass: string;        // CSS class which will be applied to datepicker container, usually used to set color theme
                            // There are 6 color schemes: theme-default, theme-green, theme-blue, theme-dark-blue, theme-red, theme-orange


// datesDisabled And datesEnabled property sets to disable specific date
bsDatepicker [datesDisabled]="disabledDates"
bsDaterangepicker [datesDisabled]="disabledDates"
disabledDates = [
  new Date('2020-02-05'),
  new Date('2020-02-09')
];

// minDate maxDate property sets min and max date
bsDatepicker [minDate]="minDate" [maxDate]="maxDate"
bsDaterangepicker [minDate]="minDate" [maxDate]="maxDate"

minDate: Date;
maxDate: Date;
constructor() {
  this.minDate = new Date();
  this.maxDate = new Date();
  this.minDate.setDate(this.minDate.getDate() - 1);
  this.maxDate.setDate(this.maxDate.getDate() + 7);
}

// bsValue property sets initial state
[bsValue]="bsValue"
[(ngModel)]="bsRangeValue"

bsValue = new Date();
bsRangeValue: Date[];
maxDate = new Date();
constructor() {
  this.maxDate.setDate(this.maxDate.getDate() + 7);
  this.bsRangeValue = [this.bsValue, this.maxDate];
}


/* For Calendar Color*/
.bs-datepicker-head,
.bs-datepicker-body table td span.selected,
.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 {
    background-color: #002375d9 !important;
}
.bs-datepicker-body table td.week span {
    color: #002475d9 !important;
    font-weight: 600;
}
.ql-editor{
    min-height:300px;
}