发表于: 2021-11-27 23:33:38
0 848
angular 日期选择器
让我们从实现一个简单的基本日期选择器开始。 打开src/app/app.component.html
文件并添加以下标记:
<input matInput [matDatepicker]="picker" placeholder="Pick a date"><mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker>
如您所见,使用input
字段和日历弹出窗口实现了物料日期选择器。 我们使用input
元素上的matDatepicker
属性使用模板引用变量( #picker
)将其连接到mat-datepicker
指令。
You can also use the startAt
property to set a start date on <mat-datepicker>
as follows:
您还可以使用startAt
属性在<mat-datepicker>
上设置开始日期,如下所示:
<mat-datepicker #picker [startAt]="startDate"></mat-datepicker>
Make sure you define a startDate
variable in your component as follows:
确保按如下所示在组件中定义一个startDate
变量:
startDate = new Date(1990, 0, 1);
You can also change the calendar start view using startView
property of <mat-datepicker>
which can be used to show a month, year or multi-year for selection with the month is the default:
您还可以使用<mat-datepicker>
startView
属性更改日历开始视图, startView
属性可用于显示月份 , 年份或多年以供选择,默认为月份:
startView="year";startView="multi-year";
You can use the min
and max
properties of the input
field to set range of dates that can be selected as follows:
您可以使用input
字段的min
和max
属性来设置日期范围,可以选择以下日期:
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Pick a date">
The minDate
and maxDate
variables need to defined in the associated component’s class with the desired date values:
需要在关联组件的类中使用所需的日期值来定义minDate
和maxDate
变量:
minDate = new Date(1989, 2, 1); maxDate = new Date(1999, 3, 3);
Material date picker provides two events that can be fired from the input
field which are (dateInput)
and (dateChange)
:
物料日期选择器提供了两个可以从input
字段触发的事件,它们是(dateInput)
和(dateChange)
(dateInput)
(dateChange)
:
dateInput
is fired when values are changed by typing a date in the input field or pick a date from the calendar通过在输入字段中输入日期或从日历中选择日期来更改值时,将触发
dateInput
dateChange
is fired on blur after the user changes the value in the input field or the date is changed from the calendar.用户更改输入字段中的值或更改日历中的日期后,模糊时会触发
dateChange
。
这是一个例子:
<input matInput [matDatepicker]="picker" placeholder="Pick a date" (dateInput)="inputEvent($event)" (dateChange)="changeEvent($event)">
You need to define the inputEvent
and changeEvent
methods in the corresponding component’s class as follows:
您需要在相应组件的类中定义inputEvent
和changeEvent
方法,如下所示:
inputEvent(event){ console.log(event.value);}changeEvent(event){ console.log(event.value);}
You can use the matDatepickerFilter
property of the input
field to disable specific dates using a filter function that returns either true or false for a date in calendar popup. If the function returns false for a date, it will be disabled and can not be selected by users:
您可以使用input
字段的matDatepickerFilter
属性来禁用特定日期,该过滤器功能可以为日历弹出窗口中的日期返回true或false。 如果该函数返回的日期为false,它将被禁用,并且用户无法选择:
<input matInput [matDatepicker]="picker" [matDatepickerFilter]="fn" placeholder="Pick a date">
You need to define the filtering function in the corresponding component’s class. For example:
您需要在相应组件的类中定义过滤功能。 例如:
fn = (aDate: Date): boolean => { const date = aDate.getDate(); // Odd dates are disabled. return date % 2 == 1; }
You can use the disabled
property which is available on the <input>
, <mat-datepicker-toggle>
and <mat-datepicker>
elements to make the element disabled and read-only:
您可以使用<input>
, <mat-datepicker-toggle>
和<mat-datepicker>
元素上可用的disabled
属性来使该元素变为禁用状态和只读状态:
<input matInput [matDatepicker]="picker" placeholder="Pick a date" [disabled]="true"> <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="true"> </mat-datepicker-toggle> <mat-datepicker #picker [disabled]="true"></mat-datepicker>
评论