Bootstrap 3 Datepicker in Angular 2+ with or without jquery

Question

I am new to Angular 2+. I am trying to integrate Bootstrap 3 Datepicker in AngularJS2. I used the [solution]: How to use Bootstrap 3 Datepicker in angular 2. But got error like

Cannot find name '$'

Is there any way to implement the task with or without jquery?

My code given below.

index.html

 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
 <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script
 src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
 integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
 crossorigin="anonymous"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">   </script>

new-job.component.html

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
   <input type='text' class="form-control" id='proposed_start_at' formControlName="proposed_start_at" #proposed_start_at/>
   <label class="mdl-textfield__label" for="proposed_start_at">Start Time</label>
</div>

new-job.component.ts

@ViewChild("proposed_start_at")
public startDateElementRef: ElementRef;

ngAfterViewInit() {
    $(this.startDateElementRef.nativeElement).datetimepicker({format: 'LT'});
}

I want to implement datetimepicker which is given in [link]: https://eonasdan.github.io/bootstrap-datetimepicker/

Fetrarij · Accepted Answer · 2017-09-06 08:37:12Z

1

you need to add: declare var $:any;

declare var $: any;

@Component({
    ...
})

Be sure to have all required librairies in your librairies:

npm install jquery bootstrap moment eonasdan-bootstrap-datetimepicker--save

then in angular-cli.json

"styles": ["../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"],
"scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/bootstrap/dist/js/bootstrap.js",
      "../node_modules/moment/moment.js",
      "../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js",
      ...

And you dont need to add these in scripts tags in index.html

edited Sep 6, 2017 at 8:37

answered Sep 6, 2017 at 7:05

Fetrarij

7,3463 gold badges33 silver badges39 bronze badges

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

5 Comments

user8567291 Over a year ago

Thanks. Now error message gone. But in console I am getting $ is not a function

Fetrarij Over a year ago

add the bootstrap-datepicker js & css in your script tag & style tag: cdnjs.com/libraries/bootstrap-datetimepicker , or by npm install & declaring in angular-cli.json

user8567291 Over a year ago

Current links and scripts tags are given below. ` <link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/…"> <script src="cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/…> <script src="cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/…>` But still getting Uncaught (in promise): Error: Error in :0:0 caused by: $ is not a function

user8567291 Over a year ago

Giving same error with Uncaught Error: Bootstrap's JavaScript requires jQuery.

Fetrarij Over a year ago

Could you recheck this answer? I think you need to add jquery & bootstrap & moment & bootstrap-datetimepicker from npm , then adding theses in angular-cli.json . And you can remove these in script tags

Collectives™ on Stack Overflow

Bootstrap 3 Datepicker in Angular 2+ with or without jquery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related