fix(datepicker): Datepicker should keep the day when navigating betwe…

…en months (ng-bootstrap#3398)
gpolychronis · Dec 10, 2019 · 62b43ae · 62b43ae
1 parent 36ce6fb
commit 62b43ae
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/demo/src/app/components/datepicker/demos/hebrew/datepicker-hebrew.html b/demo/src/app/components/datepicker/demos/hebrew/datepicker-hebrew.html
@@ -7,8 +7,10 @@
 [dayTemplateData]="dayTemplateData">
 </ngb-datepicker>
 
-<ng-template #dt let-date let-data="data" let-selected="selected" let-currentMonth="currentMonth">
-  <div class="hebrew-day" [class.outside]="date.month !== currentMonth" [class.selected]="selected">
+<ng-template #dt let-date let-data="data" let-selected="selected" let-currentMonth="currentMonth" let-focused="focused">
+  <div class="hebrew-day" [class.outside]="date.month !== currentMonth" [class.selected]="selected"
+       [class.active]="focused"
+       [class.btn-light]="focused && !selected">
     <div class="gregorian-num">{{ data.gregorian.day + '/' + (data.gregorian.month) }}</div>
     <div class="hebrew-num">{{ i18n.getDayNumerals(date) }}</div>
   </div>

diff --git a/src/datepicker/hijri/ngb-calendar-hijri.ts b/src/datepicker/hijri/ngb-calendar-hijri.ts
@@ -31,16 +31,18 @@ export abstract class NgbCalendarHijri extends NgbCalendar {
 
   getNext(date: NgbDate, period: NgbPeriod = 'd', number = 1) {
     date = new NgbDate(date.year, date.month, date.day);
+    let days;
 
     switch (period) {
       case 'y':
         date = this._setYear(date, date.year + number);
-        date.month = 1;
-        date.day = 1;
+        days = this.getDaysPerMonth(date.month, date.year);
+        date.day = date.day <= days ? date.day : days;
         return date;
       case 'm':
         date = this._setMonth(date, date.month + number);
-        date.day = 1;
+        days = this.getDaysPerMonth(date.month, date.year);
+        date.day = date.day <= days ? date.day : days;
         return date;
       case 'd':
         return this._setDay(date, date.day + number);

diff --git a/src/datepicker/jalali/jalali.ts b/src/datepicker/jalali/jalali.ts
@@ -213,7 +213,7 @@ function jalaliToJulian(jYear: number, jMonth: number, jDay: number) {
 /**
  * Returns the number of days in a specific jalali month.
  */
-function getDaysPerMonth(month: number, year: number): number {
+export function getDaysPerMonth(month: number, year: number): number {
   if (month <= 6) {
     return 31;
   }

diff --git a/src/datepicker/jalali/ngb-calendar-persian.ts b/src/datepicker/jalali/ngb-calendar-persian.ts
@@ -3,7 +3,7 @@ import {NgbDate} from '../ngb-date';
 import {NgbCalendar, NgbPeriod} from '../ngb-calendar';
 import {isInteger} from '../../util/util';
 
-import {fromGregorian, setJalaliDay, setJalaliMonth, setJalaliYear, toGregorian} from './jalali';
+import {fromGregorian, setJalaliDay, setJalaliMonth, setJalaliYear, toGregorian, getDaysPerMonth} from './jalali';
 
 @Injectable()
 export class NgbCalendarPersian extends NgbCalendar {
@@ -15,16 +15,18 @@ export class NgbCalendarPersian extends NgbCalendar {
 
   getNext(date: NgbDate, period: NgbPeriod = 'd', number = 1) {
     date = new NgbDate(date.year, date.month, date.day);
+    let days;
 
     switch (period) {
       case 'y':
         date = setJalaliYear(date, date.year + number);
-        date.month = 1;
-        date.day = 1;
+        days = getDaysPerMonth(date.month, date.year);
+        date.day = date.day <= days ? date.day : days;
         return date;
       case 'm':
         date = setJalaliMonth(date, date.month + number);
-        date.day = 1;
+        days = getDaysPerMonth(date.month, date.year);
+        date.day = date.day <= days ? date.day : days;
         return date;
       case 'd':
         return setJalaliDay(date, date.day + number);