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

overide css of angular material daterangepicker

The Ultimate Karam answered on March 13, 2024 Popularity 3/10 Helpfulness 1/10

answer overide css of angular material daterangepicker

overide css of angular material daterangepicker

Comment

// Override css of angular material daterangepicker - SCSS File

mat-form-field.date-range-picker {
  line-height: 15px!important;
  font-size: 15px!important;
  letter-spacing: normal!important;
  font-weight: 500!important;

}

:host ::ng-deep mat-form-field.date-range-picker > .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: transparent!important;
  border: 1px solid #dee2e6!important;
  border-radius: 5px!important;
}
:host ::ng-deep mat-form-field.date-range-picker > .mat-mdc-form-field-subscript-wrapper {
  display: none!important;
}

:host ::ng-deep mat-form-field.date-range-picker {
  .mat-mdc-text-field-wrapper {
    .mdc-line-ripple::before {
      border-bottom-width: 0!important;
    }
    .mat-mdc-form-field-flex {
      .mat-mdc-form-field-infix {
        padding-top: 4px!important;
        padding-bottom: 4px!important;
        min-height: auto!important;
        margin-top: 3px!important;
      }
      .mat-mdc-form-field-icon-suffix {
        .mat-datepicker-toggle {
          button.mat-mdc-icon-button.mat-mdc-button-base {
            width: 30px!important;
            height: 30px!important;
            padding: 0!important;

            svg {
              width: 20px!important;
            }
          }
        }
      }
    }
  }
}


// In Html File

<mat-form-field class="date-range-picker">
<mat-date-range-input [rangePicker]="picker">
<input matStartDate placeholder="Start date">
<input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

// Ends

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: angular-material css whatever

Link to this answer
Share Copy Link

Contributed on Mar 13 2024

The Ultimate Karam

0 Answers Avg Quality 2/10

overide css of angular material daterangepicker

Contents

More Related Answers

overide css of angular material daterangepicker

Grepper

Documentation

Social

Legal

Contact

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