Skip to content

bold styles

Keke edited this page May 14, 2021 · 7 revisions

Put CSS to the stylesData option like below. Change any style defined here.

Color themes:

Other

Try above color themes here.

<input angular-mydatepicker [(ngModel)]="model" [options]="myDatePickerOptions" 
    #dp="angular-mydatepicker">
import {IAngularMyDpOptions} from 'angular-mydatepicker';

export class MyApp {
    myDatePickerOptions: IAngularMyDpOptions = {
      selectorHeight: '300px',
      selectorWidth: '300px',
      stylesData: {
        selector: 'dp1',
        styles: `
           .dp1 .myDpHeaderBtn {
              font-size: 20px;
              font-weight: bold;
              color: #191aa5;
           }
           .dp1 .myDpWeekDayTitle {
              font-size: 16px;
              font-weight: bold;
              color: #191aa5;
           }
           .dp1 .myDpCurrMonth,
           .dp1 .myDpMonthcell,
           .dp1 .myDpYearcell {
              font-size: 18px;
              font-weight: bold;
              color: #191aa5;
           }
           .dp1 .myDpPrevMonth,
           .dp1 .myDpNextMonth {
              color: cornflowerblue;
              font-weight: bold;
           }
           .dp1 .myDpMonthNbr {
              font-size: 14px;
           }
           .dp1 .myDpMarkCurrDay,
           .dp1 .myDpMarkCurrMonth,
           .dp1 .myDpMarkCurrYear {
              border-bottom: 2px solid #191aa5;
           }
           .dp1 .myDpDisabled {
              color: #999;
           }
           .dp1 .myDpHeaderBtn:focus,
           .dp1 .myDpMonthLabel:focus,
           .dp1 .myDpYearLabel:focus {
              color: #FFDAB9;
           }
           .dp1 .myDpDaycell:focus,
           .dp1 .myDpMonthcell:focus,
           .dp1 .myDpYearcell:focus {
              box-shadow: inset 0 0 0 1px #F4A460;
           }
           .dp1 .myDpSelector:focus {
              box-shadow: -1px 1px 6px 0px #FADABF;
           }
           .dp1 .myDpSelectorArrow:focus:before {
              border-bottom-color: #FADABF;
           }
           .dp1 .myDpHeaderBtnEnabled:hover,
           .dp1 .myDpMonthLabel:hover,
           .dp1 .myDpYearLabel:hover,
           .dp1 .myDpFooterBtn:hover {
              color: #F0E68C;
           }
           .dp1 .myDpTableSingleDay:hover, 
           .dp1 .myDpTableSingleMonth:hover, 
           .dp1 .myDpTableSingleYear:hover {
              background-color: #F0E68C;
              color: #113B08;
           }
         `
      }
        // other options here
    }

    constructor() {}
}