Syncfusion datepicker doesnot trigger onchange event when partial or incomplete date is entered

[siddhant negi]

I use my custom date component as:

 <date-input label="From Date" control="completedFromDate" col="12" [form]="form" [max]="this.today"></date-input>

if I add onchange event in this, it doesnot trigger if the date is selected as partial or incomplete

this is my custom component: 

@Component({

    selector: 'date-input',

    template: `

    <div [formGroup]="form" [ngClass]="{ 'form-group-inline' : _inline , 'ax-form-group' : true }">

        <div class="label-line" [ngClass]="labelClass"  *ngIf='label !== undefined'>{{label}}<span *ngIf="!!_required" class="required-text">*</span><span class="text-muted" *ngIf="help != null">{{help}}</span></div>

        <div>

        <ejs-datepicker

            formControlName="{{control}}"

            [min]='min' (change)="OnChange($event)"

            [max]='max'

            [enableMask]='true'

            [maskPlaceholder]="{month: 'mm', day: 'dd', year: 'yyyy'}"

            [placeholder]="placeholder ?? ('Enter ' + (label ?? 'date'))"

            > </ejs-datepicker>

        <print-error [control]="this.form.controls[control]"></print-error>

        </div>

    </div>

    `,

    providers: [

        MaskedDateTimeService

    ],

})

export class DateInputControlComponent {

    constructor(

        @Optional() @Attribute('required') required: any,

        @Optional() @Attribute('inline') inline: any

    ) {

        // set required astrix when attribute is empty OR true-ish

        this._required = ( required === ""  || !!required );

        this._inline = ( inline === ""  || !!inline );

    }

    @Input()

    set required(value : any){

        this._required = ( value === "" || !!value );

    }

    _required : boolean = null;

    @Input()

    set inline(value : any){

        this._inline = ( value === "" || !!value );

    }

    _inline : boolean = null;

    @Input()

    label: string;

    @Input()

    labelClass : string;

    @Input()

    form: UntypedFormGroup;

    @Input()

    control: string;

   

    @Input()

    min: any = new Date(1900, 0, 1);

    @Input()

    max : any = new Date(2050,1,1);

    @Input()

    set col(s: string) {

        this._col = 'col-' + s;

    };

    @HostBinding('class')

    _col: string = '';

   

    @Input()

    help: string;

   

    @Input()

    placeholder: string;

    @Input()

    controlLabel : string;

   

    @Output()

    itemChange : EventEmitter<any> = new EventEmitter<any>();

    OnChange($event : any ) : void{

        let item = $event;

        let label = $event[this.controlLabel];

        let eventArgs = item.value

        this.itemChange.emit( eventArgs );

        if ( this.controlLabel != null ){

            this.form.patchValue({

                [this.controlLabel] : label          

              })

        }

    }

    _form : UntypedFormGroup;

    _control : string;

    _startedTracking : boolean = false;

    _sub : Subscription = null;

    _lastValue : string = null;

   

    ngOnChanges(changes){

        if ( changes.form ){

            this._form = changes.form.currentValue;

        }

        if ( changes.control ){

            this._control = changes.control.currentValue;

        }

     

        if ( this._form && this._control){

            if ( this._startedTracking )

                return;

       

            this._startedTracking = true;

            // PREPARE $VALUES OBSERVER once,

            this._lastValue = this._form.controls[this._control].value;

            this._sub = this._form.controls[this._control]

                .valueChanges.subscribe( nextValue => {

                    this._lastValue = nextValue;

            });

        }

    }

    ngOnDestroy(): void {

        if ( this._sub != null){

            this._sub.unsubscribe()

        }

    }

}

[Kokila Poovendran]

Hi siddhant negi,


Thank you for reaching out to Syncfusion support.

We have carefully reviewed the issue you've encountered with the Syncfusion datepicker not triggering the onchange event when a partial or incomplete date is entered. We understand the importance of this functionality in your application and apologize for any inconvenience it may have caused.

After examining your provided code snippet and attempting to replicate the issue, we were unable to encounter the described behavior on our end. To better assist you, we've created a sample based on the code you shared, which you can access bellow.

Sample: https://stackblitz.com/edit/angular-bb6swk-9n1cjj?file=app%2Fapp.module.ts,Components%2Ftextwrapper.component.html,app.component.html,Components%2Ftextwrapper.component.ts

In our testing, the onchange event was triggered correctly upon selecting or entering a date, including partial or incomplete dates. To help us understand the issue more comprehensively, could you please modify the provided sample to reflect your specific requirements and replicate the problem consistently? Additionally, if possible, sharing a video illustration of the issue would greatly aid our investigation process.

For your reference, we've prepared a video illustration demonstrating the proper triggering of the onchange event, which you can view here.

We appreciate your cooperation and patience in resolving this matter. Rest assured, we are committed to providing you with a prompt and accurate solution once we have the necessary details.

[siddhant negi]

Hi Kolika,

please add the provider in the component also, you'll be able to recreate the issue.

 providers: [

        MaskedDateTimeService

 ​   ],

 It is treating partial date as null and not triggering the onchange event; 

[Kokila Poovendran]

Hi siddhant negi,

Thank you for providing additional details regarding the issue. We've successfully replicated the problem on our end as well.

We'd like to inform you that we've already logged your request as a feature enhancement at our end. This support will be incorporated into one of our upcoming releases. You can track the progress of this request via the following feedback link: 

Feedback:  https://www.syncfusion.com/feedback/30946/support-for-blazor-datepicker-to-accept-the-date-value-which-is-in-all-applicable

We appreciate your patience and understanding as we work on addressing this matter. If you have any further questions or concerns, please don't hesitate to reach out to us.

[siddhant negi]

Hi Kokila,

 

not sure if the link of feature is the same as I requested. I need the datepicker to trigger change event even when it is filled with partial/incomplete date after using the provider [ MaskedDateTimeService ] in the component.

Please update, if it is incorporated in the same feedback or not.

Thanks.

[Kokila Poovendran]

Hi siddhant negi,

We sincerely apologize for any confusion caused. Upon reviewing your requirement, we'd like to clarify the feedback link provided earlier.

The feedback shared pertains to enabling the datepicker to accept multiple formats. By enabling multiple formats, the formats property contains an array of string formats. For instance, if we have formats like ["m/d/yyyy", "m/d/"], the component will accept values even if only the month and day are provided, triggering the change event when the component is focused out.

This feature addresses the need for the datepicker to trigger the change event even when filled with partial or incomplete dates. Therefore, you can achieve your requirement of triggering the change event for partial data by utilizing this feature.

If you have any further concerns or if this doesn't fully address your requirement, please don't hesitate to let us know. We appreciate your understanding.