ng2-datepicker how to detect change that manuelly setted date

Question

I have to use ng2-datepicker library to choose dates. I can choose it by clicking on calender. Unfortunately when i write into input area the date, it's not changing calander's date and i need this value to send a parent component when completed.

This is HTML OF ng2-datepicker (wsc-datepicker) :

<div [ngClass]="{ readonly: readonly, focused: isFocused + class }" class="form-group form-anim form-group-md">
  <label *ngIf="label" [ngStyle]="extraStyle" [for]="inputId" [ngClass]="labelClass" class="anim-label">
    {{ label | translate }} <ng-container *ngIf="required">*</ng-container>
  </label>
  <div class="position-relative">
    <input
      #dpInput
      [id]="inputId"
      [name]="inputId"
      autocomplete="off"
      class="form-control input rounded-right-10 large {{ invalidMsg ? 'error' : '' }} {{ inputClasses }}"
      maxlength="10"
      [placeholder]="_isFocused ? visibleFormat || format : (placeholder || format | translate)"
      [value]="value ? _value : ''"
      [readonly]="readonly"
      [textMask]="wscMask"
      [disabled]="disabled || readonly"
      [style.border-color]="showErrorLine ? 'red' : ''"
      (keyup)="onKeyUpMask($event)"
      (focus)="onFocus($event)"
      (blur)="onBlur($event)"
    />
    <label *ngIf="invalidMsg" class="error" [attr.for]="inputId">
      {{ invalidMsg }}
    </label>
    <atoms-icon-svg-calendar-date
      #dpToggle
      (click)="onIconClick ? onIconClick(dp) : toggle()"
      iconClass="icon-calendar"
      iconColor="svg-fill--omni-gray-900"
    ></atoms-icon-svg-calendar-date>
    ${invalidMessage(`{{ invalidMsg }}`)}
    <ng-datepicker
      [disabled]="disabled || readonly"
      #dp
      [headless]="headless"
      [displayFormat]="'dd/mm/yyyy'"
      [options]="config$ | async"
      [position]="position"
      [ngModel]="value"
      (ngModelChange)="onChange($event)"
      (close)="onChange($event)"
    ></ng-datepicker>
  </div>
</div>

** This is how i call it from another html:**

<wsc-datepicker
  visibleFormat="gg/aa/yyyy"
  placeholder="Bitiş Tarihi"
  [initialValue]="formatedToday"
  formControlName="endDate"
  (xcchange)="setEndDate($event)"
  label="Bitiş Tarihi"
  [extraStyle]="{ 'margin-top': '-9px', 'font-size': '12px', color: '#717D8D' }"
></wsc-datepicker>

I tried to detect changes by reactive form options but it didn't catch the when i write into input area. I tired to put ngModel into input and also into ng-datepicker elements. I saw this link but it didnt work for me : https://github.com/bleenco/ng2-datepicker/pull/230

ng2-datepicker how to detect change that manuelly setted date

0 Answers0