Input value not updated with JQuery datepicker in Angular 7

Question

I am using Angular 7 with a JQuery datepicker : https://github.com/uxsolutions/bootstrap-datepicker

           <div class="col-lg-2">
              <div class="form-group">
                <div class="input-group">
                  <input class="form-control form-control-lg" data-provide="datepicker" data-date-language="fr" type="text" data-date-format="dd/mm/yyyy" placeholder="From" [(ngModel)]="from" name="from" />
                  <div class="input-group-append">
                    <span class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                  </div>
                </div>
              </div>
            </div>

But in the component, this value I receive in this.from is undefined..

export class SearchBarComponent implements OnInit {
  constructor(
    private router: Router
  ) { }

  search: string;
  from: string;
  to: string;

  ngOnInit() {
  }

  onSubmit() {
    console.log(this.from)
  }
}

I do not want to use bundle like ng-boostrap or ngx-boostrap because I do not want to trick with the navbar to get it working. And I prefer to control the dependencies of Boostrap.

Is there a simple way to watch for changes of this input value please ? I did not find this answer clearly in the questions that can exist.

i am not sure if this bootstrap data-picker package is compatible with angular, maybe try other like ngx-bootstrap -> https://stackblitz.com/edit/ngx-bootstrap-datepicker — Jake11, Jul 11 '19 at 09:50
@Jake11 : Thanks, but as I said : `I do not want to use bundle like ng-boostrap or ngx-boostrap because I do not want to trick with the navbar to get it working. And I prefer to control the dependencies of Boostrap.` — fallais, Jul 11 '19 at 09:53
I tried this answer that I did not see and it is working : https://stackoverflow.com/a/36090026/1699865 — fallais, Jul 11 '19 at 12:39

score 0 · Answer 1 · answered Jul 11 '19 at 09:59

0

You can use the changeDate event

ngOnInit() {
$('.datepicker').datepicker()
    .on("changeDate", function(date) {
        this.from = date;
    });
 }

more info on events

answered Jul 11 '19 at 09:59

madalinivascu

32,064
4
39
55

Thanks a lot but I get this error : `ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__(...).datepicker is not a function` – fallais Jul 11 '19 at 12:06
make sure you load datepicker before your angular app – madalinivascu Jul 11 '19 at 12:24
ya man, see this tutorial for the error https://medium.com/all-is-web/angular-5-using-jquery-plugins-5edf4e642969 – madalinivascu Jul 11 '19 at 12:53

score 0 · Answer 2 · edited Feb 14 '20 at 13:16

0

$('#data').datepicker({
    onSelect: (dateText: any, object: any) => {
        this.formulario.get('data').setValue(dateText);
    }
});

edited Feb 14 '20 at 13:16

Roberto Russo

834
10
22

answered Feb 14 '20 at 11:33

Eduardo Krp

1

1

Welcome to SO! Please comment a bit what your code does. For more guidance see https://stackoverflow.com/help/how-to-answer – B--rian Feb 14 '20 at 13:21

Input value not updated with JQuery datepicker in Angular 7

2 Answers2