Breaking News: Grepper is joining You.com. Read the official announcement!

Bs date picker color change

Excited Emu answered on October 6, 2021 Popularity 3/10 Helpfulness 1/10

answer Bs date picker color change

Bs date picker color change

Comment

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

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: date picker whatever

Link to this answer
Share Copy Link

Contributed on Oct 06 2021

Excited Emu

0 Answers Avg Quality 2/10

Bs date picker color change

Contents

More Related Answers

Bs date picker color change

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.