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 -> stackblitz.com/edit/ngx-bootstrap-datepicker — Jake11
– Jake11, Commented Jul 11, 2019 at 9: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
– fallais, Commented Jul 11, 2019 at 9:53
I tried this answer that I did not see and it is working : stackoverflow.com/a/36090026/1699865 — fallais
– fallais, Commented Jul 11, 2019 at 12:39

madalinivascu · Accepted Answer · 2019-07-11 09:59:57Z

0

You can use the changeDate event

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

more info on events

answered Jul 11, 2019 at 9:59

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fallais Over a year ago

Thanks a lot but I get this error : ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__(...).datepicker is not a function

madalinivascu Over a year ago

make sure you load datepicker before your angular app

madalinivascu Over a year ago

ya man, see this tutorial for the error medium.com/all-is-web/…

Roberto Russo · Accepted Answer · 2020-02-14 13:16:34Z

0

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

edited Feb 14, 2020 at 13:16

Roberto Russo

85311 silver badges23 bronze badges

answered Feb 14, 2020 at 11:33

Eduardo Krp

1

1 Comment

B--rian Over a year ago

Welcome to SO! Please comment a bit what your code does. For more guidance see stackoverflow.com/help/how-to-answer

Collectives™ on Stack Overflow

Input value not updated with JQuery datepicker in Angular 7

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related