Angular2 ng-boostarp 日历控件

应公司要求 要根据用户选择的日期来 拿到数据库的数据

这是数据库的某些数据图

， 

用的mysql，后台用TP

现在主要配合接口来  实现取时间范围的效果。

这是我写的接口（待完善）

public function gold_change_data_log($page,$row,$by,$order,$token,$time,$endtime){    if(!$this->auth($token))        return;    $day_gold=new GoldChangeModel();    $count=0;    $time="";    $endtime="";    $day_gold_list=null;    if(Request::instance()->has('time'))        $time=Request::instance()->param('time');    if(Request::instance()->has('endtime'))        $endtime=Request::instance()->param('endtime');    if($time=="" && $endtime==""){        $day_gold_list = $day_gold->limit(($page - 1) * $row, $row)->order($by, $order)->select();        $count = $day_gold->count();    }    else{        $day_gold_list = $day_gold->where('create_time', '>',$time)->where('create_time','<',$endtime)->limit(($page - 1) * $row, $row)->order($by, $order)->select();        $count = $day_gold->where('create_time','>' ,$time)->where('create_time','<',$endtime)->count();    }    $data=array();    $data['page']=$page;    $data['row']=$row;    $data['length']=$count;    $data['list']=$day_gold_list;    echo json_encode($data);}

主要是让后台那边传过 开始时间$time,还有结束时间$endtime, 没有传值情况下 显示所有的数据。

这是页面上要显示的东西

开始时间写个默认时间， 结束时间默认是 当前日期

看下控制台

换个日期（换个不在日期区间的）

OK~ 搞定。

官方给的日期控件 是英文的,要自己手动修改成中文

不说废话了，上代码吧

import {Component, Injectable, OnInit,} from '@angular/core';import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';import {NgbDatepickerI18n} from '@ng-bootstrap/ng-bootstrap';const I18N_VALUES = {    'zn': {        weekdays: ['一', '二', '三', '四', '五', '六', '七'],        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月','十月','十一月','十二月']    }    // other languages you would support};// Define a service holding the language. You probably already have one if your app is i18ned. Or you could also// use the Angular LOCALE_ID value@Injectable()export class I18n {    language = 'zn';}// Define custom service providing the months and weekdays translations@Injectable()export class CustomDatepickerI18n extends NgbDatepickerI18n {    constructor(private _i18n: I18n) {        super();    }    getWeekdayShortName(weekday: number): string {        return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];    }    getMonthShortName(month: number): string {        return I18N_VALUES[this._i18n.language].months[month - 1];    }    getMonthFullName(month: number): string {        return this.getMonthShortName(month);    }}const equals = (one: NgbDateStruct, two: NgbDateStruct) =>    one && two && two.year === one.year && two.month === one.month && two.day === one.day;const before = (one: NgbDateStruct, two: NgbDateStruct) =>    !one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day        ? false : one.day < two.day : one.month < two.month : one.year < two.year;const after = (one: NgbDateStruct, two: NgbDateStruct) =>    !one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day        ? false : one.day > two.day : one.month > two.month : one.year > two.year;const now = new Date();@Component({    selector: 'datepicker',    template: `                    <form class="form-inline">                <div class="form-group col-12 ">                    <div class="input-group col-lg-6 ">                        <input class="form-control" placeholder="起始日期"                               name="dp" [(ngModel)]="start_time"                               (ngModelChange)="onDateChange($event)"                               ngbDatepicker #d="ngbDatepicker"                        >                        <button class="btn btn-default" type="button" (click)="d.toggle()">                             起始日期                        </button>                    </div>                    <div class="input-group col-lg-6 ">                        <input class="form-control" placeholder="结束日期"                               name="dpr" [(ngModel)]="model"                               (ngModelChange)="onDateendChange($event)"                               ngbDatepicker #dr="ngbDatepicker">                        <button class="btn btn-default" (click)="dr.toggle()" type="button">                            结束日期                        </button>                    </div>                </div>            </form>    `,    providers: [I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}]})export class DatePickerComponent implements OnInit{    public time:any;    public end_time:any;    public start_time:NgbDateStruct={year:2017,month:1,day:1};    public model:NgbDateStruct={year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};    constructor(calendar: NgbCalendar) {    }    onDateChange(date: NgbDateStruct) {        this.time=this.start_time.year+'-'+this.start_time.month+'-'+this.start_time.day+' '+'00:00:00';        // console.log(this.time);    }    onDateendChange(date: NgbDateStruct) {        this.end_time=this.model.year+'-'+this.model.month+'-'+this.model.day+' '+'00:00:00';        // console.log(this.end_time);    }    ngOnInit(){    }}

上面那些主要是完成   设置中文，实现2个日期控件（时间有点紧，有些还需要优化）

采用后面字符串拼接的方式是因为我数据库的create_time 用的类型是datetime 类型

 记得在model 里面倒入 对面的compont  还有module

接下来就是要 把这个东西作为 子组件 给父组件用了

父组件里面

调用 子组件的方法，一开始初始化ngAfterViewInit（）

最后一步

完事~