angular5 使用 bootstrap 控件

最新推荐文章于 2024-08-13 11:12:42 发布

HappyLeon1979

最新推荐文章于 2024-08-13 11:12:42 发布

阅读量1.8k

点赞数 1

分类专栏：技术开发文章标签： angular bootstrap datepicker

本文链接：https://blog.csdn.net/u010918970/article/details/79345976

版权

技术开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

导入

open component.ts

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

使用

open componnet.html

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

显示一个时间控件

#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);
    }

}