我不能在angular2中使用此代码。如何使用它

时间:2016-06-06 10:42:16

标签: angular

SCRIPT / JQUERY:我不能将此代码用于ANGULAR2。如何在ANGULAR中使用这段文字2.或者与我分享实例...... :(



    $(document).ready(function () {
        var data_input=$('input[name="date"]');
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent():"body";
        data_input.datepicker({
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 

<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />

<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
    <form method="post">
     <div class="form-group ">
      <label class="control-label " for="date">
       Date
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
      </div>
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>
&#13;
&#13;
&#13;

此代码仅适用于普通模式。它将在angular2.plz中工作,帮助我解决这个问题

    $(document).ready(function () {
        var data_input=$('input[name="date"]');
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent():"body";
        data_input.datepicker({
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })

HTML

<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
    <form method="post">
     <div class="form-group ">
      <label class="control-label " for="date">
       Date
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
      </div>
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

2 个答案:

答案 0 :(得分:2)

你不应该在angular / angular2渲染管道之外运行jquery /其他插件。 可能的解决方案是:

  1. 使用现有的angualr2组件库(https://valor-software.com/ng2-bootstrap/#datepickerhttp://www.primefaces.org/primeng/或任何供应商的插件)
  2. 创建您自己的组件,类似于:

    import { Component, Input, Output, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
    import { ViewChild, EventEmitter, ElementRef } from '@angular/core';
    @Component({
       selector: 'date-time-picker',
       template: '<input #input type="text" class="form-control" />' 
    })
    export class DatetimePickerComponent implements AfterViewInit {
       @ViewChild('input') input:ElementRef;
       ngAfterViewInit() { //only here you are sure that html is available.
           $(this.input.nativeElement).datepicker({
              format: 'mm/dd/yyyy',
              container: container,
              todayHighlight: true,
              autoclose: true 
           });
       }
    }
    

    并在您的应用中随处使用:

    <date-time-picker />
    

    也许你也对EventEmitter感兴趣,以捕捉所选值的变化。

  3. 如果需要:这是我写的使用http://eonasdan.github.io/bootstrap-datetimepicker/的指令的完整代码和angular2应用程序中的双向数据绑定:

        import { Component, Input, Output, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
        import { ViewChild, EventEmitter, ElementRef } from '@angular/core';
        import { ControlValueAccessor, NgControl } from '@angular/common';
        import * as moment from 'moment';
    
        declare var $: JQueryStatic;
    
        //http://eonasdan.github.io/bootstrap-datetimepicker/
    
        @Component({
            //moduleId: module.id,
            selector: 'date-time-picker',
            template: '<input #input type="text" class="form-control" />'
        })
        export class DatetimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
    
            @Input('view-mode') viewMode: string;
            @Input('view-format') viewFormat: string;
    
            @Input('ngModel') ngModel:Date;
            @Output('ngModelChanged') ngModelChanged:EventEmitter<Date>;
    
            private ngModelChangeCallback:(Date)=>void;
            private ngModelTouchedCallback:Function;
    
            private jqueryObject: any;
    
            @ViewChild('input') input:ElementRef;
    
            constructor(private ctrl: NgControl) { 
                this.ctrl.valueAccessor = this;
                this.ngModelChanged = new EventEmitter<Date>();
            }
    
            ngAfterViewInit() { 
                let jElement:any =  $(this.input.nativeElement);
    
                this.jqueryObject = jElement.datetimepicker({
                    viewMode: this.viewMode,
                    format: this.viewFormat,
                    defaultDate: this.ngModel
                });
    
                this.jqueryObject.on("dp.change", (e:any) => {
                    //this.ngModelChange.emit(e.date.toDate());
                    this.ngModelChangeCallback(e.date);
                    this.ngModelChanged.emit(e.date);
                });
                this.jqueryObject.on("dp.show", (e:any) => {
                    this.ngModelTouchedCallback(e.date);
                });
    
            }
    
            ngOnInit() {
    
            }
    
            ngOnDestroy() {
                if(this.jqueryObject) {
                    $(this.jqueryObject).data("DateTimePicker").destroy();
                }
            }
    
            writeValue(date:Date) {
                if(!this.ngModel && !date) //no changes
                    return;
    
                if(!moment(this.ngModel).isSame(date)) {
                    this.ngModel = date; 
    
                    if(this.jqueryObject) {
                        $(this.jqueryObject).data("DateTimePicker").date(this.ngModel);
                    }
                }
            }
    
            registerOnChange(fn: (Date)=>void) {
                this.ngModelChangeCallback = fn;
            }
    
            registerOnTouched(fn: Function){
                this.ngModelTouchedCallback=fn;
            }
        }
    

    在其他组件中使用:

      <date-time-picker [(ngModel)]="selectedDate" (ngModelChanged)="selectedMonthChanged($event)" view-mode='years' view-format='MM/YYYY'></date-time-picker>
    

答案 1 :(得分:0)

我相信在使用Angular 2时你需要一个新的JS代码入口点。

请参阅Angular2 equivalent of $document.ready()

我不认为您可以轻松地在Angular2中运行您的Bootstrap / Jquery代码而无需移植东西。 您使用的是https://valor-software.com/ng2-bootstrap/吗?