@_mehrad/ngx-daterangepicker-material 中文文档教程

Question

ngx-daterangepicker-material

Angular 2+ 日期范围选择器。

这个 Angular Material 插件与 Angular 2+ 兼容并且与 Ivy 兼容。 它利用 moment.js 来处理日期操作和解析。 这个插件的基础最初是 Bootstrap Date Range Picker，但它对 jQuery 和 Bootstrap 的依赖被删除了。 Angular Material 主题自 v3.0.0 起得到完全支持，因此您只需将此组件放入现有的 Material 项目中，它就会直接融入您的应用程序。

演示：https

---

Versions

Angular	ngx-daterangepicker-material
>=9.0.0	v4.x.x
<9.0.0	v2.x.x
~~>=9.0.0 depends on @angular/material~~	~~v3.x~~

---

Installation

://fetrarij.github.io/ngx-daterangepicker-material/从 npm 安装插件：

npm install ngx-daterangepicker-material --保存。

在您的模块中导入 NgxDaterangepickerMd：

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

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

Usage example

Html:

<input type="text" ngxDaterangepickerMd [(ngModel)]="selected" class="form-control"/>

Typescript:

selected: {startDate: Moment, endDate: Moment};

with some options:

Html:

<input type="text" matInput
    ngxDaterangepickerMd
    [locale]="{applyLabel: 'ok', format: 'DD-MM-YYYY'}"
    startKey="start"
    endKey="end"
    [(ngModel)]="selected"
    name="daterange"/>

Typescript:

selected: {start: Moment, end: Moment};

您可以玩我们的在线此处演示 和在这里浏览我们的演示代码。

Inline usage

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

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

Available options

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

这些选项是布尔值

isCustomDate

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

isInvalidDate

（函数）一个传递每个日期的函数在显示之前在两个日历中显示，并可能返回 true 或 false 以指示该日期是否可供选择。

isTooltipDate

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

minDate, maxDate

要设置最小和最大日期，这些选项可以是时刻日期或 ISO 格式的字符串

dateLimit

来设置我们可以选择

locale

语言环境选项的最大日期数是一个对象，其中包含：

{
    format: 'MM/DD/YYYY', // could be 'YYYY-MM-DDTHH:mm:ss.SSSSZ'
    displayFormat: 'MM/DD/YYYY', // default is format value
    direction: 'ltr', // could be rtl
    weekLabel: 'W',
    separator: ' To ', // default is ' - '
    cancelLabel: 'Cancel', // detault is 'Cancel'
    applyLabel: 'Okay', // detault is 'Apply'
    clearLabel: 'Clear', // detault is 'Clear'
    customRangeLabel: 'Custom range',
    daysOfWeek: moment.weekdaysMin(),
    monthNames: moment.monthsShort(),
    firstDay: 1 // first day is monday
}

Check here 用于设置全局语言环境

startKey and endKey

Theses 2 options are for the key you want for the value , 默认是 startDate 和 endDate，这意味着我们从 ngModel 得到的值默认是：{startDate: Date, endDate: Date}；

指定 startKey 和 endKey 会有不同的模型：

例如：

<input type="text" ngxDaterangepickerMd startKey="start" endKey="end" [(ngModel)]="model">

我们得到的模型是：{start: Date, end: Date}

ranges

(object ) 设置用户可以从中选择的预定义日期范围。 每个键都是范围的标签，它的值是一个数组，其中有两个日期表示范围的边界。 例如：

<input type="text" ngxDaterangepickerMd startKey="start" endKey="end" [ranges]="ranges" [(ngModel)]="model">

ranges: any = {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  }

Other options with ranges

您可以在使用范围时使用波纹管选项。 默认值为 false。

Attribut	Type	Description
alwaysShowCalendars	boolean	set to true if you want to display the ranges with the calendar
keepCalendarOpeningWithRange	boolean	set to true if you want the calendar won't be closed after choosing a range
showRangeLabelOnInput	boolean	set to true if you want to display the range label on input
customRangeDirection	boolean	set to true if you want to allow selection range from end date first
lockStartDate	boolean	set to true if you want to lock start date and change only the end date

Open datepicker from outside

可以从外部打开日期选择器。 您应该创建一个带有附加日期选择器指令的输入和一个带有“ngx-daterangepicker-action”类的按钮（以防止触发 clickOutside）。

    <input
      ngxDaterangepickerMd
      [closeOnAutoApply]="true"
      [autoApply]="true"
      [singleDatePicker]="true"
      [linkedCalendars]="true"
      [(ngModel)]="selected"
      (datesUpdated)="datesUpdated($event)"
      class="datepicker-calendar-icon">

    <a class="ngx-daterangepicker-action" (click)="openDatepicker()">
      Open
    </a>

  ...
    @ViewChild(DaterangepickerDirective, { static: false }) pickerDirective: DaterangepickerDirective;
  ...
  ...
  openDatepicker() {
    this.pickerDirective.open();
  }

Timepicker

如果要启用时间选择器，则必须将属性 timePicker 设置为 true。

您可以使用这些选项：

Attribut	Type	Description
timePicker24Hour	boolean	set to true if you want to set the timepicker to 24h instead of having AM and PM
timePickerIncrement	number	set the value increment of the minutes (eg: for 12 there would be 0mn, 15mn, 30mn, 45mn,)
timePickerSeconds	boolean	set true if you want do display second's select

Customisation

Attribut	Type	Description
firstMonthDayClass	string	add a custom class for all first day of the month
lastMonthDayClass	string	add a custom class for all last day of the month
emptyWeekRowClass	string	add a custom class in a row with a date in a week not in the current month
emptyWeekColumnClass	string	add a custom class for all date in a week not in the current month
lastDayOfPreviousMonthClass	string	add a custom class for the last day of the previous month
firstDayOfNextMonthClass	string	add a custom class for the first day of the next month

Positioning

Attribut	Possible values	Description
opens	left, center, right	position the calendar from the input element
drops	up, down	position the calendar to the up or down of the calendar

Available events

(rangeClicked)

单击范围时触发，并发送带有范围标签和日期值的对象，例如：{label: 'This Month', dates: [Moment, Moment]}

(datesUpdated)

当触发更新日期模型，例如应用（如果您激活了应用按钮），或者在没有应用按钮的情况下选择范围或日期，并发送包含开始和结束日期的对象，例如：{startDate: Moment, endDate: Moment}

Global locale

要设置全局语言环境，请将此对象传递给 NgxDaterangepickerMd.forRoot()。

例如：

@NgModule({
    imports: [
        ... ,
        FormsModule,
        NgxDaterangepickerMd.forRoot({
            separator: ' - ',
            applyLabel: 'Okay',
        })
    ],
    declarations: [App],
    bootstrap:    [App]
})

Development

Prepare your environment

安装本地依赖项：npm install。

Development server

运行 npm start 以在端口 4200 上启动开发服务器。在

浏览器中打开 http//:localhost:4200。

Tests

运行 npm test 或 ng test 来运行测试。

License

麻省理工学院