[英]i cant use this code in angular2. how to use it
脚本/Jquery:我不能将此代码用于 angular 2。如何在 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>
此代码仅适用于正常模式。 它在 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>
您不应该在 angular/angular2 渲染管道之外运行 jquery/其他插件。 可能的解决方案是:
创建您自己的组件,类似于:
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 感兴趣,以捕捉所选值的变化。
如果需要:这是我编写的指令的完整代码,用于在 angular2 应用程序中使用http://eonasdan.github.io/bootstrap-datetimepicker/和双向数据绑定:
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>
我相信在使用 Angular 2 时,您需要一个新的 JS 代码入口点。
参见Angular2 等效的 $document.ready()
我不认为你可以轻松地在 Angular2 中运行你的 Bootstrap/Jquery 代码而不移植东西。 您在使用https://valor-software.com/ng2-bootstrap/吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.