How to apply custom css to ng2 datepicker



This post will explain you "how to apply custom css to ng2 datepicker" , ng2 datepicker is simple and easy to use datepicker in angular.
but customizing ng2 datepicker according to our requirement is not easy.so below is the sample code snippet  where i have applied bootstrap "form-control" css to ng2 datepicker.

Below is the bootstrap "form-control" css from official documentation

.form-control{
   display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

I would like to apply above css to ng2 datepicker control. 

Steps:

1.Apply any class to ng2 datepicker (ex:date-picker)

<ng-datepicker class="date-picker"></ng-datepicker>

2.Apply following css to "date-picker" class

.date-picker  input {
    display: block !important;
    width: 100% !important;
    height: calc(2.25rem + 2px) !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    border-radius: .25rem !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
}

 

Labels: apply bootstrap class to ng2 datepicker, custom class to ng2 date picker, ng2 datepicker custom class
Subscribe

Receive Quality Tutorials Straight in your Inbox by submitting your Email below:

Delivered by FeedBurner

Protected by Copyscape Duplicate Content Checker