angular5 使用 bootstrap 控件

导入

open component.ts

import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

使用

open componnet.html

date-time class="form-control" placeholder="年-月-日"
       name="dp" ngModel ngbDatepicker #dPress="ngbDatepicker"
       (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t">
class="input-group-append">
    class="btn btn-outline-secondary" (click)="showDatepicker(dPress)" type="button">
        class="input-group-addon">class="fa fa-calendar">
    

显示一个时间控件

#dPress input 控件的 id

ngbDatepicker 是angular 的 ngModel

按钮响应事件

showDatepicker(d) {d.toggle();
}

日期选择后触发业务

onDateChange(date: NgbDateStruct) {if (!this.fromDate && !this.toDate) {this.fromDate = date;
    } else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {this.toDate = date;
    } else {this.toDate = null;
        this.fromDate = date;
    }if(this.fromDate!==null && this.toDate !== null){console.log("from :" + this.fromDate.day);
        console.log("to :" + this.toDate.day);

        const fromStr = this.fromDate.year+"-"+this.fromDate.month+"-"+this.fromDate.day;
        const toStr = this.toDate.year+"-"+this.toDate.month+"-"+this.toDate.day;
        this.homeService.findRegress(fromStr,toStr);
    }}

参考：https://ng-bootstrap.github.io/#/components/datepicker/examples

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！