diff --git a/demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.html b/demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.html
index cb2a91816a..f037687786 100644
--- a/demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.html
+++ b/demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.html
@@ -1,14 +1,24 @@
This datepicker uses a custom month layout.
-
-
-
- {{i18n.getMonthFullName(monthStruct.month)}} {{monthStruct.year}}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
{{ i18n.getMonthShortName(month.month) }} {{ month.year }}
+
+
+
+
+
diff --git a/demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.ts b/demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.ts
index 4334fda00c..7da3734b7a 100644
--- a/demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.ts
+++ b/demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.ts
@@ -1,27 +1,35 @@
-import {Component} from '@angular/core';
-import {NgbDatepickerI18n} from '@ng-bootstrap/ng-bootstrap';
+import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {NgbDatepicker, NgbDatepickerI18n} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-datepicker-custommonth',
templateUrl: './datepicker-custommonth.html',
+ encapsulation: ViewEncapsulation.None,
styles: [`
- ngb-datepicker {
- display: flex;
- border: none;
+ .custom-datepicker .ngb-dp-header {
+ padding: 0;
}
- .custom-month-view {
- margin: 1rem;
- display: flex;
- flex-direction: column;
- align-items: center;
- border: 1px solid gray;
- border-radius: 1rem 1rem 0 0;
- }
- .custom-month-view span{
- font-weight: bold;
+ .custom-datepicker .ngb-dp-months {
+ display: grid;
+ grid-template-columns: auto auto;
+ grid-column-gap: 1rem;
+ grid-row-gap: 0.5rem;
}
`]
})
export class NgbdDatepickerCustommonth {
+
+ @ViewChild(NgbDatepicker, {static: true}) datepicker: NgbDatepicker;
+
constructor(public i18n: NgbDatepickerI18n) {}
+
+ navigate(number: number) {
+ const {state, calendar} = this.datepicker;
+ this.datepicker.navigateTo(calendar.getNext(state.firstDate, 'm', number));
+ }
+
+ today() {
+ const {calendar} = this.datepicker;
+ this.datepicker.navigateTo(calendar.getToday());
+ }
}