ngx-aircal可配置且轻巧的Angular日期范围选择器。

ngx-aircal可配置且轻巧的Angular日期范围选择器。
插件名称 ngx-aircal
发布时间 2020年4月22日
插件作者 cswarb

ngx-aircal是一款现代,可配置且轻巧的Angular日期范围选择器。

安装:

# NPM
$ npm install ngx-aircal --save

使用:

1.将’NgxAircalModule’模块添加到模块中的导入数组

import { NgxAircalModule } from "ngx-aircal";
@NgModule({
  imports: [
     ...,
    NgxAircalModule
})

2.将以下内容添加到您的html模板中。ngx-aircal使用数据属性选择器来保持HTML有效:

<div data-ngx-aircal [options]="calendarOptions" name="dateRange" 
[(ngModel)]="dateRange"
(onDateRangeCommitted)="onDateRangeCommitted($event)" 
(onDateRangeChanged)="onDateRangeChanged($event)"
(onCalendarViewChanged)="onCalendarViewChanged($event)" 
(onInputFieldChanged)="onInputFieldChanged($event)"
(onDateRangeInitialised)="onDateRangeInitialised($event)"
(onDateRangeCleared)="onDateRangeCleared($event)">
</div>

选项:

将选项对象初始化为组件属性。现在,将其传递给日历组件:

import { AircalOptions } from "ngx-aircal";
export class AppComponent {
    ...
    public calendarOptions: AircalOptions = new AircalOptions();
    ...
}

您可以通过将一个对象传递给构造函数来更新选项:

export class AppComponent {
    ...
    public calendarOptions: AircalOptions = new AircalOptions({
      inlineMode: true,
      daysSelectedCounterVisible: false
    });
    ...
}
选项名称 默认值 类型 描述
defaultStart new Date() Date 设置日历打开时的默认开始视图
inlineMode false Boolean 显示没有输入字段的日历
disable false Boolean 禁用设置日期和应用日期的功能
singlePicker false Boolean 使用一个范围选择器而不是一个范围选择器以节省空间
startDate null Date 设置开始日期。如果未提供结束日期,则日期选择器将在UI上处于突出显示的模式,准备选择结束日期。
endDate null Date 设置结束日期。如果未设置开始日期,它将回退为开始日期。
dayLabels new AircalDayLabels() AircalDayLabels 设置一周中每一天的标签值
selectionShortcuts { “7.days”: “7 Days”, “14.days”: “14 Days”, “1.months”: “1 Month”, “6.months”: “6 Months”, “1.years”: “1 Year” } Object selectionShortcutVisible为true 时,将传递给快速选择组件的选项和值。键是插件解析的值,该值是输入下拉列表中显示的值。用“。”分隔密钥长度和持续时间值。它可以解析不同的持续时间。例如,“ 7.weeks”:“ 7 Weeks”
dateFormat “dd/MM/yyyy” String 格式化输入中显示的日期,并在回调响应中给出日期。格式为Unicode技术标准#35。使用date-fns库格式化日期。设置dateFormat选项时,请注意必须使用Unicode令牌
previousMonthWrapAround true Boolean 日期应显示在前一个月的空格中
nextMonthWrapAround true Boolean 日期应在下个月的空格中显示
daysSelectedCounterVisible true Boolean 日历是否应显示所选天数
selectionShortcutVisible false Boolean 是否应该显示范围快捷方式
backgroundVisible true Boolean 使背景透明
width “” String 覆盖在CSS中设置的宽度
height “” String 覆盖在CSS中设置的宽度
applyText “Apply” String 更改文本以提交日期范围
autoApplyAndClose false Boolean 选择结束日期(如果开始和结束已经存在,则选择开始日期)时,将自动应用日期选择并关闭日历
includeExamplePlaceholder true Boolean 显示输入字段的占位符示例。根据dateFormat选项动态生成示例日期
autoCloseWhenApplied false Boolean 按下“应用”按钮时关闭日历
clearText “Clear” String 更改文本以清除日期范围
highlightToday true Boolean 突出显示今天的单元格颜色
showClearBtn true Boolean UI上是否应显示清除按钮
showApplyBtn true Boolean 应否将应用按钮显示在UI上
minYear 1000 Number 可选择的最小年份
maxYear 9999 Number 可选择的最大年份
disablePreviousSelection false Boolean 禁用上一个选择箭头
disableForwardSelection false Boolean 禁用下一个选择箭头
disableFromHereBackwards null Date 从提供的日期开始向后禁用单元格的选择
disableFromHereForwards null Date 从提供的日期开始禁用单元格的选择
indicateInvalidDateRange true Boolean 指示是否在输入字段上显示红色边框
hasArrow true Boolean 日历是否应具有箭头指针
arrowBias “left” arrowBias 箭头应显示在哪个边缘上
calendarPosition calendarBias “bottom” 日历相对于输入显示在哪里
allowQuicksetMonth false Boolean 通过单击月份允许快速选择月份
allowQuicksetYear false Boolean 通过单击年份可以快速选择年份
allowUserInputField true Boolean 默认视图应为输入字段,还是仅包含文本的按钮
allowInfiniteEndDate false Boolean 不允许设置结束日期
closeOnOutsideClick false Boolean 通过在组件外部单击来关闭日历
icons {leftArrow: null, rightArrow: null } { leftArrow?: null | string, rightArrow?: null | string } 选择提供base64图像来替换主日历上的现有箭头

模式:

您可以使用ngModel或反应形式来处理日历。

ngModel

用2个props定义一个对象startDate和endDate。这两个属性都必须是“日期”类型。

ngOnInit() {
	this.dateRange = {
    startDate: new Date(
      2018,
      6,
      27
    ), 
    endDate: new Date(
      2018,
      8,
      27
    )
  };
}

您应该将对象传递到模板上的ngModel 框中:

<div data-ngx-aircal [options]="calendarOptions" [(ngModel)]="dateRange"></div>

Reactive forms

ngOnInit() {
  this.form = this._FormBuilder.group({
    dateRange: [{
      startDate: new Date(
        2018,
        6,
        27
      ),
      endDate: new Date(
        2018,
        8,
        27
      )
    }, Validators.required]
  }); 
}

在模板中添加以下内容:

<form [formGroup]="myForm">
<div data-ngx-aircal [options]="calendarOptions" formControlName="dateRange"></div>
</form>

事件,回调和响应

您可以使用许多回调与父组件进行通信。回调的完整列表如下。

<div data-ngx-aircal [options]="calendarOptions" name="dateRange"
       [(ngModel)]="dateRange"
       (onDateRangeCommitted)="onDateRangeCommitted($event)"
       (onDateRangeChanged)="onDateRangeChanged($event)"
       (onCalendarViewChanged)="onCalendarViewChanged($event)"
       (onInputFieldChanged)="onInputFieldChanged($event)" 
       (onDateRangeInitialised)="onDateRangeInitialised($event)"
       (onDateRangeCleared)="onDateRangeCleared($event)">
</div>

请注意事件名称和提供的回调函数,该函数以$event作为参数:

(onDateRangeCommitted)="onDateRangeCommitted($event)"

插件将响应一组特定的属性

class AircalResponse {
    public startDate: Date;
    public endDate: Date;
    public formattedStartDate: string;
    public formattedEndDate: string;
}

class AircalInputResponse {
    public startDate: Date;
    public endDate: Date;
    public formattedStartDate: string;
    public formattedEndDate: string;
    public isRangeValid: boolean;
}

用法示例:

public onDateRangeChanged(event: AircalResponse) {
	this.updatePageResults(event.startDate, event.endDate);
}

回调列表

所有回调将返回AircalResponse或AircalInputResponse类型。AircalInputResponse有一个额外的布尔值,用于显示日期是否有效。

回调名称 回应类型 描述
onDateRangeCommitted AircalResponse 当范围由用户提交时。通常使用Apply按钮,但如果showApplyBtn为false,则当选择结束日期时它将自动响应
onDateRangeChanged AircalResponse 用户更改开始或结束日期时。
onCalendarViewChanged AircalResponse 使用箭头向左或向右更改视图时
onInputFieldChanged AircalInputResponse 用户修改输入字段时。
onDateRangeInitialised AircalResponse 组件初始化后,将立即返回响应以保持一致性。
onDateRangeCleared AircalResponse showClearBtn选项为true且用户按下按钮时,将返回响应。