Angular 8+的自定义日期范围选择器– ngx-daterange

Angular 8+的自定义日期范围选择器– ngx-daterange
插件名称 ngx-daterange
发布时间 2020年4月15日
插件作者 Alsoicode

最小的干净,高度可定制的Angular 8+日期范围选择器。

基于Moment.js库来操纵日期和时间。

使用:

1.安装并导入ngx-daterange模块。

# NPM
$ npm install ngx-daterange --save
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxDateRangeModule } from 'ngx-daterange';

2.在您的应用程序中使用该组件。

<date-range-picker 
  [options]="options" 
  [parentFormGroup]="form" 
  [controlName]="'myDateRange'">
</date-range-picker>
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    FormsModule,
    NgxDateRangeModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3.所有可能的选项,以自定义日期范围选择器。

autoApply?: boolean;
clickOutsideAllowed?: boolean;
displayFormat?: string;
disabled?: boolean;
format: string;
icons?: 'default' | 'material' | 'font-awesome';
labelText?: string;
minDate: momentNs.Moment;
maxDate: momentNs.Moment;
position?: 'left' | 'right';
preDefinedRanges?: IDefinedDateRange[];
singleCalendar?: boolean;
startingFromDate?: momentNs.Moment;
startingToDate?: momentNs.Moment;
validators?: ValidatorFn | ValidatorFn[];