物料datePicker(角度)中的多个日期选择 [英] Multiple Date Select in Material datePicker (Angular)

问题描述

我有一个要求用户可以在日期选择器中选择多个日期.如何在Angular Material日期选择器中实现多个日期选择功能?

I have a requirement that a user can select multiple dates in a date picker. How can I implement multiple date select functionality in an Angular Material date picker?

我通过 dateClass 进行了尝试.但是，每次选择日期后，日期选择器都会关闭.

I tried this through dateClass. But, after every date selection the date picker will be closed.

这就是我尝试过的

HTML代码:

<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>

打字稿代码:

dateClass = (d: Date) => {
    const date = d.getDate();

    // Highlight the 1st and 20th day of each month.
    return (date === 1 || date === 5 || date === 14 || date === 19 || date === 21 ) ? 'example-custom-date-class' : undefined;
}

推荐答案

您需要直接使用mat-calendar，可以将其包含在mat菜单和div中，以避免"closed"，请参见

You need work directly with the mat-calendar, you can enclosed in a mat menu and into a div to avoid "closed", see

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>calendar_today</mat-icon>
</button>
<mat-menu #appMenu="matMenu">
    <div (click)="$event.stopPropagation()">
        <mat-calendar #calendar 
           (selectedChange)="select($event,calendar)" 
            [dateClass]="isSelected">
        </mat-calendar>
    </div>
</mat-menu>

我选择以yyyy-MM-dd(*)的方式将日期值存储在字符串中，所以

I choose store the values of the dates in a string in the way yyyy-MM-dd (*), so

进口:

import { Component,ViewEncapsulation} from "@angular/core";

TS代码:

daysSelected: any[] = [];
event: any;

isSelected = (event: any) => {
  const date =
    event.getFullYear() +
    "-" +
    ("00" + (event.getMonth() + 1)).slice(-2) +
    "-" +
    ("00" + event.getDate()).slice(-2);
  return this.daysSelected.find(x => x == date) ? "selected" : null;
};

select(event: any, calendar: any) {
  const date =
    event.getFullYear() +
    "-" +
    ("00" + (event.getMonth() + 1)).slice(-2) +
    "-" +
    ("00" + event.getDate()).slice(-2);
  const index = this.daysSelected.findIndex(x => x == date);
  if (index < 0) this.daysSelected.push(date);
  else this.daysSelected.splice(index, 1);

  calendar.updateTodaysDate();
}

最后，.css很简单:

Finally the .css is simple:

.mat-calendar-body-cell.selected
{
  background-color:red!important;
  border-radius: 50%
}
.drop-calendar
{
  width:30rem
}

注意:不要忘记在组件中将封装设置为无:

NOTE: Dont forget to set encapsulation to none in your component:

encapsulation:ViewEncapsulation.None

更新:为什么要使用ViewEncapsulation.styles.css中没有任何其他用法

Update Why use ViewEncapsulation.None and other aproach use in styles.css

问题在于如何将颜色设置为所选日期.在mat-calendar [dateclass]中使用时，我们创建一个函数，该函数接收日期(每月的每一天)作为参数，并返回带有所需类名的字符串.在代码中，如果日期在选定的数组中，则该类为选定".

The problem is how put color to the date selected. When we use in mat-calendar [dateclass], we create a function that received as parameter the date (of each day of the month) and return a string with the name of the class you want. In the code, if the day is in the array selected, the class is 'selected'.

但是如果我们不使用ViewEncapsulation.None或我们放入styles.css(或styles.scss)(**)，则不会考虑这一点.是的，必须在全局"样式中定义此样式.风格. (请记住，ViewEncapsulation.None不会使组件中定义的样式成为全局"

But this don't take account if we don't use ViewEncapsulation.None or we put in the styles.css (or styles.scss) (**). Yes, it's necesary that this style was defined in a "global" style. (remember that ViewEncapsulation.None make that the styles defined in the component becomes "global"

注意:如果您玩"游戏，使用ViewEncapsulation在stackblitz中.没有人记住您需要刷新stackblitz，因为样式仍然保存.

NOTE: If you "play" in stackblitz with ViewEncapsulation.None remember that you need refresh the stackblitz because the styles remain saved.

(**)记住angular.json中的样式"中包含

(**) remember in angular.json include in "styles"

"styles": [
 "src/styles.scss"
],

您可以在 stackblitz

(*)，例如存储所选日期的getTime().想法是，您需要在数组"daysSelected"中找到它，否则，如果直接使用对象Date，则需要将日期中的年，月和日与该数组的元素进行比较.这使性能差.认为函数已选择"是已选择的".称为每次点击多少天一次?

(*) you can choose, e.g. store the getTime() of the date selected. The idea is that you need find it in the array "daysSelected", else, if you use directy an object Date, you need compare year, month and day from date to the elements of the array. This give a poor perfomance. Think that the function "isSelected" is called how many times as days has a month, each time a click is done

这篇关于物料datePicker(角度)中的多个日期选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！