Bs date picker color change
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;
}