Angular2 Ngb-datepicker 宽度调整

Question

i have a question regarding angular2 ngb-datepicker width. i am using two datepicker's in my app. one is bigger and other is smaller and my question is how to differentiate these two and give widths and make it responsive.

Thanks

Answer 1

I added to div tag "q-datepicker" class

<div class="q-datepicker position-relative w-100">
                <input
                    formControlName="From"
                    class=" form-control rounded-corner bg-white primary-font-color"
                    placement="bottom"
                    placeholder=""
                    [minDate]=""
                    ngbDatepicker
                    #d="ngbDatepicker"
                    readonly=""
                />
                <button
                    type="button"
                    (click)="d.toggle()"
                >
                    <i class="far fa-calendar-alt"></i>
                </button>
            </div>

then add the following styles in style.css

.q-datepicker{
ngb-datepicker{
  left:0 !important;
  width: 350px;
  .ngb-dp-months{
    .ngb-dp-month{
      width: 100%;
      .ngb-dp-weekday{
        width: 2.5rem;
        margin-right: .5rem;
      }
      .ngb-dp-week{
        .ngb-dp-day{
            width: 2.5rem;
            margin-right: .5rem;
            div{
                width: 100%;
            }
        }
      }
    }
  }
}

}

Answer 2

You can do any styling on instance level using CSS - just specify your custom class on the ngb-datepicker node

<ngb-datepicker class="my-datepicker-1"/>

Once you set it up that way you can overwrite any styles in the underlying structure. It is pretty self explanatory (use Inspect element in your browser).

You will see something like that (CSS notation)

.my-datepicker-1
  .ngb-dp-header //where you pick month and year
  .ngb-dp-content
    .ngb-dp-month 
      .ngb-dp-week.ngb-dp-weekdays //row with names of the weekdays
      .ngb-dp-week //row with days
        .ngb-dp-day

and you can style pretty much everything there.

So for example if you want to have day cells bigger (originally 2rem) you can do the following:

.my-datepicker-1 .ngb-dp-day {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}

and you are good to go.

If you need to style specific dates depending on the data you can also provide ng-template with html prescription on what should be put inside the div.ngb-dp-day and that way provide additional styling hooks for later use in your stylesheet.

In your template code:

<ngb-datepicker class="my-datepicker-1" [dayTemplate]="myDay" />

<ng-template #myDay let-custom="custom">
  <div class="my-day-1" [class.special-date]="isSpecialDay(date)" [class.custom]="custom">
    {{ date.day }}
  </div>
</ng-template>

and that way bind to data in your controller. If isSpecialDay(date) returns true for given date your div gets special-date in its class list sequence ( <div class="my-day-1 special-date'> ) and you can use it for extra styling.

Answer 3

Fortunately, it's a piece of cake using CSS.

1) Set the width of your choice:

ngb-datepicker {
    width: 400px!important;
}

2) Make the datepicker responsive:

.ngb-dp-month {
    width: 100%;
}
.ngb-dp-weekdays,
.ngb-dp-week {
    justify-content: space-evenly;
}