Ngx-bootstrap: Datepicker setting "Invalid Date" text into ngModel

[adiprasanna]

Every time when the date entered / set to the text box is invalid, the ngModel of the text box changes to "Invalid Date". Is there a way to disable this behaviour or set the date to empty / null?

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.0.1
Angular: 5.0.1
Bootstrap: 4.1.1

[adiprasanna]

Can anyone please help me with this? I saw many issues similar to this. None of them are answering to the point.

[ludmilanesvitiy]

@adiprasanna There's no need to open an issue here if you want to ask a general question, use StackOverflow or Slack instead
https://stackoverflow.com/questions/tagged/ngx-bootstrap
https://ngx-home.slack.com/
Also, for getting quick answers, please, create a reproduction on StackBlitz: https://stackblitz.com/edit/ngx-bootstrap?file=app%2Fapp.module.ts

[adiprasanna]

@ludmilanesvitiy I created it as an issue because the original ngModel gets updated as "Invalid Date". I do not know the design decisions behind this. However, if the application already has a different validation logic and different way to display the validation errors to the user, this validation is troubling. In our application, we display the errors very differently. So, I want to disable this validation. I would assume having no such feature would be an issue.

Also, the text box where I am facing this issue is being used in multiple places to derive few other values and validations. If I have to check if the date value is "Invalid Date" before using it, this needs to be done in multiple places.

I don't mind to call this as a non-issue. All I need is the solution to fix this. Please let me know if there is any way ngx-bootstrap library provides for me to disable this validation.

[harikasin]

In my opinion, it is not a question, it is a problem.

If the value of the date is invalid, the component should be shown as invalid but the value shouldn't change as the user might just want to fix it.

With an option to disable this behavior we could add our own validators and CSS classes in reactive forms.

[EugeneGoroschenya]

4487

[uzbekdev1]

Hello all!

I didn't see, really solution!

Here have my answer:

https://github.com/valor-software/ngx-bootstrap/issues/4487#issuecomment-546717023

[animamundi]

I agree that this is an issue on the ngx-bootstrap side. The ngModel should only have date objects, not strings. However I was able to work around this.

I made a component that implements NG_VALUE_ACCESSOR and from there I was able to cover up the "Invalid date" string from ngx-bootstrap.

First on the model, instead of saving "Invalid date", I will just save null instead. Then on the input itself, the value of the input needs to manually overridden to be an empty string instead of "Invalid date".

Template

<input
  bsDatepicker
  #datePickerInput
  type="text"
  [ngModel]="date"
  (ngModelChange)="onInputChange($event)"
  (blur)="onTouched()"
/>

Component

import {
    ChangeDetectionStrategy,
    Component,
    ElementRef,
    forwardRef,
    Renderer2,
    ViewChild,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-date-picker',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './date-picker.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent ),
      multi: true,
    },
  ],
})
export class DatePickerComponent implements ControlValueAccessor {
  @ViewChild('datePickerInput', { static: true })
  public datePickerInput: ElementRef<HTMLInputElement>;

  public date: Date;

  public onChange: (value: Date) => void;
  public onTouched: () => void;

  constructor(private renderer: Renderer2) {
    super();
  }

  public onInputChange(value: Date | string): void {
    // ngx-bootstrap might give us a string "Invalid date"
    // if it does, ignore it and save null instead
    const updatedValue = typeof date === 'string' ? null : value;

    if (updatedValue === null) {
      // override ngx-bootstraps "Invalid date" string on the native input
      this.renderer.setProperty(this.datePickerInput.nativeElement, 'value', '');
    }

    this.writeValue(updatedValue);
    this.onChange(updatedValue);
  }

  public writeValue(value: Date): void {
    this.date = value;
  }

  public registerOnChange(fn: (value: Date) => void): void {
    this.onChange = fn;
  }

  public registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }
}