fix min || max value issue

tiampersian · Apr 23, 2024 · a97601a · a97601a
1 parent 5d85b22
commit a97601a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 16 deletions.
diff --git a/projects/tiampersian/kendo-jalali-date-inputs/package.json b/projects/tiampersian/kendo-jalali-date-inputs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tiampersian/kendo-jalali-date-inputs",
-  "version": "0.1.350",
+  "version": "0.1.352",
   "license": "MIT",
   "description": "angular jalali ( persian ) date time picker base on kendo-angular-dateinputs ",
   "homepage": "https://github.com/tiampersian/kendo-jalali-date-inputs",

diff --git a/projects/tiampersian/kendo-jalali-date-inputs/src/lib/services/jalali-month-view.service.ts b/projects/tiampersian/kendo-jalali-date-inputs/src/lib/services/jalali-month-view.service.ts
@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import dayjs from 'dayjs';
-import { firstDayOfMonth, getToday, isInSelectionRange, range, lastDayOfMonth, addMonths, startOfDay, addDays, addWeeks, EMPTY_SELECTIONRANGE, endOfDay } from './kendo-util-overrides';
+import { firstDayOfMonth, getToday, isInSelectionRange, range, lastDayOfMonth, addMonths, startOfDay, addDays, addWeeks, EMPTY_SELECTIONRANGE, endOfDay, durationInMonths } from './kendo-util-overrides';
 import { JalaliCldrIntlService } from './jalali-cldr-intl.service';
 import { MonthViewService, CELLS_LENGTH, EMPTY_DATA, ROWS_LENGTH } from './kendo-services/month-view.service';
 
@@ -54,16 +54,13 @@ export class JalaliMonthViewService extends MonthViewService {
   }
 
   skip(value, min) {
-    const diff = this.intl.getDayJsValue(value).endOf('month').diff(
-      this.intl.getDayJsValue(min).startOf('month'), 'month'
-    );
-    return diff;
+    return durationInMonths(min, value, this.intl.localeIdByDatePickerType);
   }
   rowLength(options = {}) {
     return CELLS_LENGTH + (options['prependCell'] ? 1 : 0);
   }
   total(min, max) {
-    return dayjs(max).diff(min, 'month') + 1;
+    return durationInMonths(min, max, this.intl.localeIdByDatePickerType) + 1;
   }
   beginningOfPeriod(date) {
     if (!date) {
@@ -82,7 +79,7 @@ export class JalaliMonthViewService extends MonthViewService {
     const dateValue = this.intl.getDayJsValue(viewDate).toDate();
     const lastMonthDate = lastDayOfMonth(dateValue, this.intl.localeIdByDatePickerType);
     const lastMonthDay = startOfDay(lastMonthDate, this.intl.localeIdByDatePickerType);
-    const firstMonthDate = firstDayOfMonth(viewDate);
+    const firstMonthDate = firstDayOfMonth(viewDate, this.intl.localeIdByDatePickerType);
     const firstMonthDay = startOfDay(firstMonthDate, this.intl.localeIdByDatePickerType);
     const backward = -1;
     const date = addWeeks(firstMonthDate, this.intl.firstDay(), backward, this.intl.localeIdByDatePickerType);
@@ -94,7 +91,9 @@ export class JalaliMonthViewService extends MonthViewService {
         const cellDate = this.normalize(addDays(baseDate, cellOffset), min, max);
         const cellDay = startOfDay(cellDate, this.intl.localeIdByDatePickerType);
         const otherMonth = cellDay < firstMonthDay || cellDay > lastMonthDay;
-        const outOfRange = (!min ? false : startOfDay(cellDate, this.intl.localeIdByDatePickerType) < min) || (!max ? false : endOfDay(cellDate, this.intl.localeIdByDatePickerType) > max);
+
+        const endDay = endOfDay(cellDate, this.intl.localeIdByDatePickerType);
+        const outOfRange = (!min ? false : startOfDay(cellDate, this.intl.localeIdByDatePickerType) < min) || (!max ? false : endDay > max);
         if (outOfRange) {
           return null;
         }

diff --git a/projects/tiampersian/kendo-jalali-date-inputs/src/lib/services/kendo-util-overrides.ts b/projects/tiampersian/kendo-jalali-date-inputs/src/lib/services/kendo-util-overrides.ts
@@ -80,19 +80,23 @@ export const firstDecadeOfCentury = (dt, localeId?) => {
   return getDayJsValue(dt, localeId).add((-(getYear(dt, localeId) % 100)), 'year').toDate();
 }
 
+export const durationInMonths = (min, max, localeId?) => {
+  return getDayJsValue(max, localeId).endOf('month').diff(
+    getDayJsValue(min, localeId).startOf('month'), 'month'
+  );
+}
 export const lastDecadeOfCentury = (dt, localeId?) => {
   return getDayJsValue(dt, localeId).add((-(getYear(dt, localeId) % 100)) + 90, 'year').toDate();
-
 }
 export const dateInRange = (candidate, min, max) => {
   if (!candidate) {
-      return candidate;
+    return candidate;
   }
   if (min && candidate < min) {
-      return new Date(min);
+    return new Date(min);
   }
   if (max && candidate > max) {
-      return new Date(max);
+    return new Date(max);
   }
   return candidate;
 };

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -418,6 +418,7 @@ <h2>Basic Usage</h2>
   <div style="flex:1;">
     <br />
     <p><strong>Final Value</strong>: {{value}}</p>
+    <p><strong>Final Value</strong>: {{getJalaliValue()}}</p>
   </div>
   <div class="card-container"
        [dir]="(currentLocaleId=='fa-IR'||currentLocaleId=='fa')?'rtl':'ltr'"
@@ -432,7 +433,7 @@ <h2>Basic Usage</h2>
         <p>(use <code>←</code> and <code>→</code> to navigate, <code>↑</code> and <code>↓</code> to update)</p>
 
         <p>DatePicker</p>
-        <kendo-datepicker [(value)]="value"></kendo-datepicker>
+        <kendo-datepicker  [min]="max" [(value)]="value"></kendo-datepicker>
         <p>(use <code>Alt</code>+<code>↓</code> to open the Calendar)</p>
 
         <p>TimePicker</p>
@@ -450,7 +451,7 @@ <h2>Basic Usage</h2>
         <br>
         <br>
         <p>Calendar</p>
-        <kendo-calendar [(value)]="value"></kendo-calendar>
+        <kendo-calendar [max]="max" [(value)]="value"></kendo-calendar>
       </div>
     </div>
     <div class="row example-wrapper">

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -2,6 +2,7 @@ import { RTL } from '@progress/kendo-angular-l10n';
 import { ChangeDetectorRef, Component, Inject, LOCALE_ID, Injector } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { DatePickerType, JalaliCldrIntlService } from '@tiampersian/kendo-jalali-date-inputs';
+import dayjs from 'dayjs';
 
 @Component({
   selector: 'app-root',
@@ -13,7 +14,15 @@ import { DatePickerType, JalaliCldrIntlService } from '@tiampersian/kendo-jalali
 })
 export class AppComponent {
   title = 'kendo-jalali-date-inputs';
-  public value: Date = new Date();
+  __todayDate = new Date();
+  max = new Date(
+    this.__todayDate.getFullYear(),
+    this.__todayDate.getMonth(),
+    this.__todayDate.getDate(),
+    23, 59, 59, 999
+  );
+
+  public value: Date = null;
   rerender = true;
   locales = ['fa-IR', 'fa', 'en-US', 'en'];
   calendarTypes = Object.values(DatePickerType);
@@ -55,5 +64,11 @@ export class AppComponent {
   changeValue($event: any): void {
     this.value = $event;
   }
+
+  getJalaliValue() {
+    if (!this.value) return null;
+
+    return dayjs(this.value).calendar('jalali').locale(this.currentLocaleId).format('ddd DD MMMM YYYY hh:mm:ss')
+  }
 }