Dev Express Date comparison doesnt work correctly when doing date comparison

Question

I'm using devexpress in my angular 8 application and having an issue in date comparison fields. It works fine if I select the date using the control. But if I manually type the exact dates in both the date controls the date field highlights in red saying they dont match. Could somebody tell me what the problem is

UI

 <dxi-item dataField="dateOfBirth" editorType="dxDateBox" [editorOptions]="dateOfBirthEditorOptions">
        <dxi-validation-rule type="required"></dxi-validation-rule>
      </dxi-item>
      <dxi-item dataField="confirmDateOfBirth" editorType="dxDateBox" [editorOptions]="dateOfBirthEditorOptions">
        <dxi-validation-rule type="required"></dxi-validation-rule>
        <dxi-validation-rule type="compare" [comparisonTarget]="dateComparison"></dxi-validation-rule>
      </dxi-item>

TS

export class Invite {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  dateOfBirth: string;
  preferredName: string;
  preferredFirstName: string;
  preferredLastName: string;
  repId: number;
  conflictApproved: boolean;
}


     import { ViewChild } from '@angular/core';
import { DxFormComponent } from 'devextreme-angular';
import _ from 'lodash';
import { HttpErrorResponse } from '@angular/common/http';

import { AddDefaultValidationMessages } from '../../../shared/helpers/add-default-validation-messages';
import { Invite } from '../models/invite.model';
import { InviteService } from '../services/invite.service';
import { ConfirmationDialogService } from '../../../shared/services/confirmation-dialog.service';
import HttpStatusCode from '../../../shared/constants/httpStatusCode';
import { chain } from '../../../shared/helpers/chain';

export class BaseInvite {
  constructor(protected readonly service: InviteService, private confirmationDialog: ConfirmationDialogService) {}
  public buttonText: string;
  public headerText: string;
  public showEmail = true;
  public currentRepId = 0;
  protected inviteMethod;
  public infoText: string;
  public gcodeText: string;
  @ViewChild(DxFormComponent, { static: false }) form: DxFormComponent;
  public invite: Invite = new Invite();

  public sending: boolean;

  public phoneEditorOptions = { mask: '+44 7000 000000', useMaskedValue: true };
  public minimumBirthDate = new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate());
  public dateOfBirthEditorOptions = {
    width: '100%',
    max: this.minimumBirthDate,
    dateOutOfRangeMessage: 'Age must be at least 18 years'
  };
  public namePattern: any = /^[^0-9]+$/;

  public emailComparison = () => this.invite.email;
  public phoneComparison = () => this.invite.phone;
  public dateComparison = () => this.invite.dateOfBirth;
  public addDefaultValidationMessages = item => AddDefaultValidationMessages(item);

  public sendInvite = () => {
    this.currentRepId = this.invite.repId;
    this.sending = true;
    this.inviteMethod(_.cloneDeep(this.invite))
      .then(result => {
        if (result === true) {
          this.form.instance.resetValues();
          this.invite.repId = this.currentRepId;
        }
      })
      .finally(() => (this.sending = false))
      .catch((e: HttpErrorResponse) => {
        if (e.status === HttpStatusCode.CONFLICT && !this.invite.conflictApproved) {
          this.confirmationDialog.show(
            chain(() => e.error.message) + ' Do you want to continue and assign the person to selected representative?',
            'Person already exists',
            () => {
              this.invite.conflictApproved = true;
              this.sendInvite();
            }
          );
        }
      });
    return false;
  }
}

I tried to change the datatype to dateOfBirth: Date; but it still didnt work — Tom, Dec 10 '19 at 17:23
can you add more of your component ts code? It's not clear to me how things are defined and bound from the component class to the template. Date comparisons in javascript are weird, but i'd want to rule out any issues in the component class code. — Chris Newman, Dec 13 '19 at 19:41
Try to `console.log` both your dates in the `dateComparison()` to see how they come across. Maybe there's some parsing that isn't done when you type dates manually — Jojofoulk, Dec 16 '19 at 06:34
Can you try `dateComparison = () => { console.log( this.invite.dateOfBirth, this.invite.confirmDateOfBirth); return this.invite.dateOfBirth;}` and try to see what the two dates are when you manually change the date value? — Jojofoulk, Dec 17 '19 at 06:16
Can you provide a StackBlitz code snippet to help us practically solve the problem — DevLoverUmar, Dec 18 '19 at 14:35

Auqib Rather · Answer 1 · 2019-12-19T07:34:14.557

0

you should compare it with form instance like this it will work

public dateComparison = () => {
    return this.form.instance.option("formData").dateOfBirth;
};

for more help on validation devExpressValidation

edited Dec 19 '19 at 07:34

answered Dec 19 '19 at 07:28

Auqib Rather

396
1
10

Dev Express Date comparison doesnt work correctly when doing date comparison

1 Answers1