Angular 2+日期范围选择器

Angular 2+日期范围选择器
插件名称 ngx-daterangepicker-material
发布时间 2020年6月1日
插件作者 fetrarij

一个Angular 2/4/5 +组件,它利用moment.js为您的应用创建Material Design样式的日期范围选择器。

安装:

# NPM
$ npm install ngx-daterangepicker-material --save

在模块中导入NgxDaterangepickerMd

import { FormsModule } from '@angular/forms';
import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
import { App } from './app';

@NgModule({
    imports: [
        ... ,
        NgxDaterangepickerMd.forRoot()
    ],
    declarations: [App],
    bootstrap:    [App]
})
export class AppModule {}

使用范例

该演示是在某些不同用例中查看选择器实际操作的最佳位置,以及随附的源代码。选择器可以两种方式使用,即a Component或a Directive。以下是两个说明性的基本片段:

指示

ngxDaterangepickerMd指令添加到<input>元素中会将选择器作为弹出元素添加到该<input>字段。的dropsupdown)和opensleftcenterright)输入确定在何处显示弹出。

<input matInput ngxDaterangepickerMd [formControl]="formControl" />

有一些选择:

<input
    matInput
    ngxDaterangepickerMd
    startKey="start"
    endKey="end"
    [locale]="{applyLabel: 'ok', format: 'DD-MM-YYYY'}"
    [formControl]="formControl"
/>

组件

您可以直接在模板中使用组件,这会将其inline模式设置为true,在这种情况下,日历不会在选择日期/范围后隐藏。然后,您可以使用事件:rangeClickeddatesUpdatedchosenDate获取其选择状态。

<ngx-daterangepicker-material (chosenDate)="chosenDate($event)"> </ngx-daterangepicker-material>

可用选项

autoApply,showDropdowns,singleDatePicker,showWeekNumbers,showISOWeekNumbers,alwaysShowCalendars,showClearButton,showCancel

这些选项是布尔值

isCustomDate

(函数)在日历中显示日期之前的每个日期传递的函数,并且可以返回字符串或CSS类名称数组以应用于该日期的日历单元格

isInvalidDate

(函数)在显示两个日历中的每个日期之前传递的函数,并且可以返回true或false以指示该日期是否可供选择。

isTooltipDate

(函数)在显示两个日历中的每个日期之前传递的函数,并且可以返回要显示为工具提示的文本。

minDate,maxDate

要设置最小和最大日期,这些选项是时刻日期

dateLimit

要设置日期的最大数量,我们可以选择

locale

语言环境选项是具有以下内容的对象:

{
    format: 'MM/DD/YYYY', // could be 'YYYY-MM-DDTHH:mm:ss.SSSSZ'
    displayFormat: 'MM/DD/YYYY', // 默认为格式值
    direction: 'ltr', // 可能是rtl
    weekLabel: 'W',
    separator: ' To ', // 默认是 ' - '
    cancelLabel: 'Cancel', // 默认是 'Cancel'
    applyLabel: 'Okay', // 默认是 'Apply'
    clearLabel: 'Clear', // 默认是 'Clear'
    customRangeLabel: 'Custom range',
    daysOfWeek: moment.weekdaysMin(),
    monthNames: moment.monthsShort(),
    firstDay: 1 // 第一天是星期一
}