How to clear manual input date in angular ngx-mydatepicker

Question

I am working in ngx-mydatepicker to select dates in my Angular(11) app. I followed the URL https://github.com/kekeh/ngx-mydatepicker and I am able to get the datepicker as expected.

I have implemented the reactive forms in my application, I did the following changes. Datepicker is working fine when I am selecting the toggleCalender icon, and I am able to clear the date when clicking clearDate icon.

Problem is, when I am manually provide input for date it allows, then I am trying to clear the date, it actually clears from formControl, but in web page the provided date is still there, also I am trying to change the date from toggle icon and it is not changed in web page. still keeps the manual input date what I provided.

Did I miss something. I am using ngx-datepicker version 9.0.2

@NgModule({
    imports:      [ BrowserModule, NgxMyDatePickerModule.forRoot() ],
    declarations: [ UserApp ],
    bootstrap:    [ UserApp ]
})
export class UserAppModule {}

My User HTML looks like below,

        <input class="form-control" style="float:none" placeholder="Select a date" ngx-mydatepicker name="myDate"
               formControlName="myDate" [options]="myOptions" #dp="ngx-mydatepicker"/>

        <span class="input-group-btn">
            <button type="button" class="btn btn-default" (click)="dp.clearDate()">
                <i class="glyphicon glyphicon-remove"></i>
            </button>
            <button type="button" class="btn btn-default" (click)="dp.toggleCalendar()">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>

My User Component Looks like below,

export class UserApp implements OnInit {

    myOptions: INgxMyDpOptions = {
        dateFormat: 'dd/mm/yyyy'
    };

    private myForm: FormGroup;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.myForm = this.formBuilder.group({
            myDate: [null, Validators.required]
        });
    }

    clearDate(): void {
        // Clear the date using the patchValue function
        this.myForm.patchValue({myDate: null});
    }
}

score 0 · Answer 1 · edited Aug 14 '22 at 07:39

I faced this problem and I found the problem caused by this line of code setInputValue

When you input a date manually, the control will run function isDateValid() isDateValid to check if input is valid. That function take this.elem.nativeElement.value but this.elem.nativeElement.value != value is assigned by this.elem.nativeElement.setAttribute("value", value). That why once input invalid value, this.elem.nativeElement.value can not be update anymore;

My fixing is create new directive override NgxMyDatePickerDirective function setInputValue, change this.elem.nativeElement.setAttribute("value", value) to this.elem.nativeElement.value = value

How to clear manual input date in angular ngx-mydatepicker

1 Answers1