预设的日期范围选择器-rangepicker

预设的日期范围选择器-rangepicker
插件名称 rangepicker
发布时间 2020年4月14日

纤巧且受Material Design启发的日期范围选择器,具有预设的日期范围,可加快选择速度。

安装

$ npm install @ sgv / rangepicker moment@2.x

用法

import { SgvRangepickerModule } from '@sgv/rangepicker';
@NgModule({
    imports: [
        SgvRangepickerModule
    ]
})

输入模板文本的示例(模板ui是可选的)

<mat-form-field>
<input matInput [sgvRangepicker]="myDatepicker" placeholder="Choose a date">
<sgv-rangepicker #myDatepicker></sgv-rangepicker>
</mat-form-field>

您也可以将其用于反应式或模板驱动的表格。

选项

您可以提供选项图。目前可以使用自定义颜色和日期格式

import { SgvRangepickerOptions } from '@sgv/rangepicker';
@NgModule({
    providers: [
        {
            provide: SgvRangepickerOptions,
            useValue: {
                color: 'red', // 默认是 '#3f51b5'
                format: 'DD.MM.YY' // 默认是 'DD.MM.YYYY'
            }
        }
    ],
})

事件

间隔更改时,SgvRangepickerComponent会发出dateChanged事件。