Invalid Format for Date 1400/02/29

[m-khnarges]

Hello,

When using dp-date-picker component to choose a date with format YYYY/MM/DD, when selecting date 1400/02/29 the input format and its relevant formControl becomes invalid. I use angular version 11.2.12 but this bug is also visible on Angular Jalali Date Picker demo. It is good to mention that it has been tested on Google Chrome and Safari, they both showed that bug.

From date-form.component.ts:

  datePickerConfig: IDatePickerConfig = {
    drops: 'down',
    format: 'YYYY/MM/DD',
    showTwentyFourHours: true
  };

From date-form.component.html:

  <dp-date-picker
    dir="rtl"
    [config]="datePickerConfig"
    [formControlName]="'dayInPersian'"
    mode="day"
    placeholder="تاریخ"
    theme="dp-material">
  </dp-date-picker>

Regards.

[fingerpich]

Hi, In jalali-moment the same day is valid. I think its considers the date in gregorian calendar system in validation process. Can you please create PR and fix it?

[keivansahebdelfard]

@fingerpich did u solve the problem ?

[keivansahebdelfard]

I have found a solution ! To resolve this problem I have used the following code : SharedService :

@Injectable({
  providedIn: "root",
})
export class SharedService {
   dtRegEx(strDt: string) {
       var re = `^([0-1][3-5][0-9][0-9])\-(0[1-9]|1[0-2])\-([0-2][0-9]|3[0-1]) ([0-1][0-9]|2[0-3]):([0-5][0-9])\:([0-5][0-9])( ([\-\+]([0-1][0- 
                   9])\:00))?$`;

       if (strDt.match(re)) {
         return true;
       }

       return false;
    }
 }

Template :

<dp-date-picker
      #dtPicker
      [config]="datePickerConfig"
     style="width: 100%"
     class="flex-fill"
     [formControl]="userLogForm.controls['logDt']"
      [(ngModel)]="userLogTimeDto.logDt"
      placeholder="تاریخ و ساعت"
      theme="dp-material"
      [mode]="'daytime'"
       required
       [ngClass]="{
                'is-invalid': userLogForm.hasError('wrongStartEndDt')
         }"
         >
        </dp-date-picker>
        <span class="formLable">تاریخ و ساعت</span>
        <div class="invalid-feedback">فیلد ضروری</div>

TypeScript :

@ViewChild("dtPicker") dtPicker: DatePickerComponent;

ngAfterViewInit() {
    this.dtPicker.onViewDateChange = ($event) => {
      if (typeof $event === "string") {
        var moment = require("jalali-moment");
        if (this.sharedSv.dtRegEx($event.split("/").join("-"))) {
          this.dtPicker.appendToElement.classList.remove("ng-invalid");
          this.userLogTimeDto.logDt= moment($event, "jYYYY/jM/jD HH:mm:ss");
          this.userLogForm.value.logDt= moment(
            $event,
            "jYYYY/jM/jD HH:mm:ss"
          );
         (this.userLogForm.controls["logDt"] as any).status = "VALID";
          this.userLogForm.updateValueAndValidity();
        } else {
          if (!this.dtPicker.appendToElement.classList.contains("ng-invalid"))
            this.dtPicker.appendToElement.classList.add("ng-invalid");
          (this.userLogForm.controls["logDt"] as any).status = "INVALID";
          this.userLogForm.updateValueAndValidity();
        }
      }
    };
  }

Of course, if someone can use this solution in the directive, it will save a lot of time

[fingerpich]

Do you still have the problem? are you using the latest version? its merged /pull/142

[keivansahebdelfard]

I'm using version 2.4.2 . What version should I install to fix this problem? version 2.2.8 has render2 error in angular ~9.0.1

[m-khnarges]

Today I update the package to the latest version and it still has the problem @fingerpich

[fingerpich]

@Rouhollah your published version(2.2.8) is outdated. the previous version was 2.4.2 you missed the latest fixes in 2.2.8 can you please fix it?

[MuhammadEtemad]

@m-khnarges I had same problem in my forms .I used this widget in my forms as formcontrol and because of the problem which you mentioned i was very nervous . After several hours which i debug and follow the process I found that the status of form make to 'INVALID' during entering the date value with keyboard. After the date entered i checked the status of formcontrol which was Invalid while the date value was correct . i test this for format in config input and this solution was ok for me . config = { ... format : 'jYYYY/jMM/jDD' } use it for your widget .