代码之家  ›  专栏  ›  技术社区  ›  user8567291

带或不带jquery的Angular 2+中的Bootstrap 3日期选择器

  •  2
  • user8567291  · 技术社区  · 8 年前

    AngularJS2。我使用了[解决方案]: How to use Bootstrap 3 Datepicker in angular 2 . 但出现了这样的错误

    Cannot find name '$'

    我的代码如下。

     <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>
    

    新工作。组成部分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>
    

    @ViewChild("proposed_start_at")
    public startDateElementRef: ElementRef;
    
    ngAfterViewInit() {
        $(this.startDateElementRef.nativeElement).datetimepicker({format: 'LT'});
    }
    

    https://eonasdan.github.io/bootstrap-datetimepicker/

    1 回复  |  直到 8 年前
        1
  •  1
  •   Fetrarij    8 年前

    您需要添加: declare var $:any;

    declare var $: any;
    
    @Component({
        ...
    })
    

    确保您的库中有所有必需的库:

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

    "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",
          ...
    

    你们不需要在索引中添加这些脚本标签。html