wrong display dates and weekday names in calendat

aminhavasi commented 1 month ago

When using the standard configuration, the days of the week in the calendar display incorrectly, for example, instead of showing 'Monday,' it displays '2222.' Similarly, if we hover over any day in the calendar, it shows the wrong title for that day.

psychomet commented 1 month ago

please ensure correct import NZ_DATE CONFIG from ngx-antd-jalali @aminhavasi

aminhavasi commented 1 month ago

this is our config .

import { NZ_DATE_CONFIG } from 'ngx-antd-jalali/i18n';
{ provide: NzDateAdapter, useClass: JalaliMomentDateAdapter },
  {
    provide: NZ_DATE_CONFIG,
    useValue: {
      firstDayOfWeek: 1,
      displayFormats: {
        veryShortWeekLabel: 'dd',
        dateInput: 'jYYYY/jMM/jDD', //persian date format : global config format on nz-date-picker component
        dateTimeInput: 'jYYYY-jMM-jDD HH:mm:ss', //persian date time format : global config format on nz-date-picker component
      },
    },
  }

@psychomet

aminhavasi commented 1 month ago

do you want to check it sir? and fix it? @psychomet

AminAzarpey commented 1 month ago

@aminhavasi

in main.ts or config bootstrap you should have this :

import { NzDateAdapter } from 'ngx-antd-jalali/core';
import { NZ_DATE_CONFIG } from 'ngx-antd-jalali/i18n';
import {
  JalaliMomentDateAdapter,
} from 'your-route';

 { provide: NzDateAdapter, useClass: JalaliMomentDateAdapter },
      {
        provide: NZ_DATE_CONFIG,
        useValue: {
          displayFormats: {
            veryShortWeekLabel: 'dd',
            dateInput: 'yyyy/MM/DD',
            dateTimeInput: 'yyyy-MM-DD HH:mm:ss',
          },
        },
      },
`

JalaliMomentDateAdapter file is like this : 
`import { Injectable } from '@angular/core';

import moment, { Moment } from 'jalali-moment';
import { DateMode, NzDateAdapter } from 'ngx-antd-jalali/core';
import StartOf = moment.unitOfTime.StartOf;

@Injectable()
export class JalaliMomentDateAdapter extends NzDateAdapter<Moment> {
  constructor() {
    super();
    moment.locale('fa');
    moment.updateLocale('fa', {
      weekdaysMin: ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
    });
  }

  toNativeDate(input: Moment): Date {
    return input.toDate();
  }

  today(): Moment {
    return moment();
  }

  deserialize(input: string | number): Moment {
    return moment(input);
  }

  calendarStartOfWeek(date: Moment): Moment {
    return date.clone().startOf('week');
  }

  calendarStartOfMonth(date: Moment): Moment {
    return date.clone().startOf('month');
  }

  getYear(date: Moment): number {
    return date.get('year');
  }

  getMonth(date: Moment): number {
    return date.get('month');
  }

  getDay(date: Moment): number {
    return date.get('day');
  }

  getTime(date: Moment): number {
    return date.toDate().getTime();
  }

  getDate(date: Moment): number {
    return date.get('date');
  }

  getHours(date: Moment): number {
    return date.get('hours');
  }

  getMinutes(date: Moment): number {
    return date.get('minutes');
  }

  getSeconds(date: Moment): number {
    return date.get('seconds');
  }

  getMilliseconds(date: Moment): number {
    return date.get('milliseconds');
  }

  clone(date: Moment): Moment {
    return date.clone();
  }

  setHms(date: Moment, hour: number, minute: number, second: number): Moment {
    return date.clone().hour(hour).minute(minute).second(second);
  }

  setYear(date: Moment, year: number): Moment {
    return date.clone().year(year);
  }

  addYears(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'years');
  }

  addDays(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'days');
  }

  addMonths(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'months');
  }

  setDate(date: Moment, amount: number): Moment {
    return date.clone().date(amount);
  }

  setDay(date: Moment, day: number): Moment {
    return date.clone().day(day);
  }

  setMonth(date: Moment, month: number): Moment {
    return date.clone().month(month);
  }

  isSame(first: Moment, second: Moment, mode: DateMode): boolean {
    return first.isSame(second, (mode as StartOf) ?? 'day');
  }

  isBefore(first: Moment, second: Moment, mode: DateMode): boolean {
    return first.isBefore(second, (mode as StartOf) ?? 'day');
  }

  isToday(date: Moment): boolean {
    return date.isSame(new Date(), 'day');
  }

  isValid(date: Moment): boolean {
    return date.isValid();
  }

  isFirstDayOfMonth(date: Moment): boolean {
    return date.isSame(moment().startOf('month'));
  }

  isLastDayOfMonth(date: Moment): boolean {
    return date.isSame(moment().endOf('month'));
  }

  format(date: Date, displayFormat: string): string {
    return moment(date).format(displayFormat);
  }

  getISOWeek(date: Date): number {
    return moment(date).week();
  }

  parse(
    text: string,
    formatStr: string,
    options: { locale: Locale; weekStartsOn: number } | undefined
  ): Moment {
    return moment(text, formatStr, options?.locale.toString());
  }
}

after all in your component to use calender or date-picker you should import it from ngx-antd-jalali/calendar or ngx-antd-jalali/date-picker

have a nice day buddy! 👌🙌

aminhavasi commented 1 month ago

@aminhavasi

in main.ts or config bootstrap you should have this :

import { NzDateAdapter } from 'ngx-antd-jalali/core';
import { NZ_DATE_CONFIG } from 'ngx-antd-jalali/i18n';
import {
  JalaliMomentDateAdapter,
} from 'your-route';

 { provide: NzDateAdapter, useClass: JalaliMomentDateAdapter },
      {
        provide: NZ_DATE_CONFIG,
        useValue: {
          displayFormats: {
            veryShortWeekLabel: 'dd',
            dateInput: 'yyyy/MM/DD',
            dateTimeInput: 'yyyy-MM-DD HH:mm:ss',
          },
        },
      },
`

JalaliMomentDateAdapter file is like this : 
`import { Injectable } from '@angular/core';

import moment, { Moment } from 'jalali-moment';
import { DateMode, NzDateAdapter } from 'ngx-antd-jalali/core';
import StartOf = moment.unitOfTime.StartOf;

@Injectable()
export class JalaliMomentDateAdapter extends NzDateAdapter<Moment> {
  constructor() {
    super();
    moment.locale('fa');
    moment.updateLocale('fa', {
      weekdaysMin: ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
    });
  }

  toNativeDate(input: Moment): Date {
    return input.toDate();
  }

  today(): Moment {
    return moment();
  }

  deserialize(input: string | number): Moment {
    return moment(input);
  }

  calendarStartOfWeek(date: Moment): Moment {
    return date.clone().startOf('week');
  }

  calendarStartOfMonth(date: Moment): Moment {
    return date.clone().startOf('month');
  }

  getYear(date: Moment): number {
    return date.get('year');
  }

  getMonth(date: Moment): number {
    return date.get('month');
  }

  getDay(date: Moment): number {
    return date.get('day');
  }

  getTime(date: Moment): number {
    return date.toDate().getTime();
  }

  getDate(date: Moment): number {
    return date.get('date');
  }

  getHours(date: Moment): number {
    return date.get('hours');
  }

  getMinutes(date: Moment): number {
    return date.get('minutes');
  }

  getSeconds(date: Moment): number {
    return date.get('seconds');
  }

  getMilliseconds(date: Moment): number {
    return date.get('milliseconds');
  }

  clone(date: Moment): Moment {
    return date.clone();
  }

  setHms(date: Moment, hour: number, minute: number, second: number): Moment {
    return date.clone().hour(hour).minute(minute).second(second);
  }

  setYear(date: Moment, year: number): Moment {
    return date.clone().year(year);
  }

  addYears(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'years');
  }

  addDays(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'days');
  }

  addMonths(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'months');
  }

  setDate(date: Moment, amount: number): Moment {
    return date.clone().date(amount);
  }

  setDay(date: Moment, day: number): Moment {
    return date.clone().day(day);
  }

  setMonth(date: Moment, month: number): Moment {
    return date.clone().month(month);
  }

  isSame(first: Moment, second: Moment, mode: DateMode): boolean {
    return first.isSame(second, (mode as StartOf) ?? 'day');
  }

  isBefore(first: Moment, second: Moment, mode: DateMode): boolean {
    return first.isBefore(second, (mode as StartOf) ?? 'day');
  }

  isToday(date: Moment): boolean {
    return date.isSame(new Date(), 'day');
  }

  isValid(date: Moment): boolean {
    return date.isValid();
  }

  isFirstDayOfMonth(date: Moment): boolean {
    return date.isSame(moment().startOf('month'));
  }

  isLastDayOfMonth(date: Moment): boolean {
    return date.isSame(moment().endOf('month'));
  }

  format(date: Date, displayFormat: string): string {
    return moment(date).format(displayFormat);
  }

  getISOWeek(date: Date): number {
    return moment(date).week();
  }

  parse(
    text: string,
    formatStr: string,
    options: { locale: Locale; weekStartsOn: number } | undefined
  ): Moment {
    return moment(text, formatStr, options?.locale.toString());
  }
}

after all in your component to use calender or date-picker you should import it from ngx-antd-jalali/calendar or ngx-antd-jalali/date-picker

have a nice day buddy! 👌🙌

sir.i use this config and also i have this bug

aminhavasi commented 1 month ago

@aminhavasi in main.ts or config bootstrap you should have this :

import { NzDateAdapter } from 'ngx-antd-jalali/core';
import { NZ_DATE_CONFIG } from 'ngx-antd-jalali/i18n';
import {
  JalaliMomentDateAdapter,
} from 'your-route';

 { provide: NzDateAdapter, useClass: JalaliMomentDateAdapter },
      {
        provide: NZ_DATE_CONFIG,
        useValue: {
          displayFormats: {
            veryShortWeekLabel: 'dd',
            dateInput: 'yyyy/MM/DD',
            dateTimeInput: 'yyyy-MM-DD HH:mm:ss',
          },
        },
      },
`

JalaliMomentDateAdapter file is like this : 
`import { Injectable } from '@angular/core';

import moment, { Moment } from 'jalali-moment';
import { DateMode, NzDateAdapter } from 'ngx-antd-jalali/core';
import StartOf = moment.unitOfTime.StartOf;

@Injectable()
export class JalaliMomentDateAdapter extends NzDateAdapter<Moment> {
  constructor() {
    super();
    moment.locale('fa');
    moment.updateLocale('fa', {
      weekdaysMin: ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
    });
  }

  toNativeDate(input: Moment): Date {
    return input.toDate();
  }

  today(): Moment {
    return moment();
  }

  deserialize(input: string | number): Moment {
    return moment(input);
  }

  calendarStartOfWeek(date: Moment): Moment {
    return date.clone().startOf('week');
  }

  calendarStartOfMonth(date: Moment): Moment {
    return date.clone().startOf('month');
  }

  getYear(date: Moment): number {
    return date.get('year');
  }

  getMonth(date: Moment): number {
    return date.get('month');
  }

  getDay(date: Moment): number {
    return date.get('day');
  }

  getTime(date: Moment): number {
    return date.toDate().getTime();
  }

  getDate(date: Moment): number {
    return date.get('date');
  }

  getHours(date: Moment): number {
    return date.get('hours');
  }

  getMinutes(date: Moment): number {
    return date.get('minutes');
  }

  getSeconds(date: Moment): number {
    return date.get('seconds');
  }

  getMilliseconds(date: Moment): number {
    return date.get('milliseconds');
  }

  clone(date: Moment): Moment {
    return date.clone();
  }

  setHms(date: Moment, hour: number, minute: number, second: number): Moment {
    return date.clone().hour(hour).minute(minute).second(second);
  }

  setYear(date: Moment, year: number): Moment {
    return date.clone().year(year);
  }

  addYears(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'years');
  }

  addDays(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'days');
  }

  addMonths(date: Moment, amount: number): Moment {
    return date.clone().add(amount, 'months');
  }

  setDate(date: Moment, amount: number): Moment {
    return date.clone().date(amount);
  }

  setDay(date: Moment, day: number): Moment {
    return date.clone().day(day);
  }

  setMonth(date: Moment, month: number): Moment {
    return date.clone().month(month);
  }

  isSame(first: Moment, second: Moment, mode: DateMode): boolean {
    return first.isSame(second, (mode as StartOf) ?? 'day');
  }

  isBefore(first: Moment, second: Moment, mode: DateMode): boolean {
    return first.isBefore(second, (mode as StartOf) ?? 'day');
  }

  isToday(date: Moment): boolean {
    return date.isSame(new Date(), 'day');
  }

  isValid(date: Moment): boolean {
    return date.isValid();
  }

  isFirstDayOfMonth(date: Moment): boolean {
    return date.isSame(moment().startOf('month'));
  }

  isLastDayOfMonth(date: Moment): boolean {
    return date.isSame(moment().endOf('month'));
  }

  format(date: Date, displayFormat: string): string {
    return moment(date).format(displayFormat);
  }

  getISOWeek(date: Date): number {
    return moment(date).week();
  }

  parse(
    text: string,
    formatStr: string,
    options: { locale: Locale; weekStartsOn: number } | undefined
  ): Moment {
    return moment(text, formatStr, options?.locale.toString());
  }
}

after all in your component to use calender or date-picker you should import it from ngx-antd-jalali/calendar or ngx-antd-jalali/date-picker have a nice day buddy! 👌🙌

sir.i use this config and also i have this bug

sir.i use this config and i also have this problem .i think its a bug

psychomet commented 1 month ago

@aminhavasi

Please check this with your code here, I don't see any problem: https://stackblitz.com/edit/stackblitz-starters-qrecf1

aminhavasi commented 1 month ago

@aminhavasi

Please check this with your code here, I don't see any problem: https://stackblitz.com/edit/stackblitz-starters-qrecf1

according to the same code you have, when we hover over the name of the week, this bug will be seen again. @psychomet @AminAzarpey

psychomet commented 1 month ago

@aminhavasi
check stackblitz again and open console development to check the locale configuration in a browser, i put javascript to OnInit for inspect the locale settings and determine whether the browser supports a specific locale, such as Persian (fa).

aminhavasi commented 1 month ago

@aminhavasi check stackblitz again and open console development to check the locale configuration in a browser, i put javascript to OnInit for inspect the locale settings and determine whether the browser supports a specific locale, such as Persian (fa).

i check it and i get someting like you:

saeidi-dev commented 1 month ago

I also see a problem. This problem exists in the address you posted https://stackblitz.com/edit/stackblitz-starters-qrecf1

You see a problem when you hover over the header of the days of the week with the mouse

psychomet commented 1 month ago

Thank you for informing I am going to look for a solution to the problem. It may take a few days. If you have time to solve this problem, I will be happy to fix it. feel free @aminhavasi @saeidi-dev

psychomet / ngx-antd-jalali

wrong display dates and weekday names in calendat #2