Material datePicker (Angular) 中的多日期选择 [英] Multiple Date Select in Material datePicker (Angular)

问题描述

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

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

这是我试过的

HTML 代码:

<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>

打字稿代码:

dateClass = (d: Date) =>{const 日期 = d.getDate();//突出显示每个月的 1 号和 20 号.return (date === 1 || date === 5 || date === 14 || date === 19 || date === 21 ) ?'example-custom-date-class':未定义；}

解决方案

你需要直接使用mat-calendar，你可以将mat-calendar包含在一个mat menu中，然后放入div中以避免关闭"，见

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

</mat-menu>

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

进口:

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

TS 代码:

daysSelected: any[] = [];事件:任何；isSelected = (event: any) =>{常量日期 =event.getFullYear() +——"+(00" + (event.getMonth() + 1)).slice(-2) +——"+(00"+ event.getDate()).slice(-2);返回 this.daysSelected.find(x => x == 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);否则 this.daysSelected.splice(index, 1);calendar.updateTodaysDate();}

最后.css很简单:

.mat-calendar-body-cell.selected{背景颜色:红色！重要；边界半径:50%}.drop-日历{宽度:30rem}

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

encapsulation:ViewEncapsulation.None

更新为什么在styles.css中使用ViewEncapsulation.None和其他方法

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

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

注意:如果您玩"在带有 ViewEncapsulation 的 stackblitz 中.没有人记得你需要刷新 stackblitz，因为样式仍然保存.

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

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

您可以在 stackblitz

(*) 你可以选择，例如存储所选日期的 getTime().这个想法是您需要在数组daysSelected"中找到它，否则，如果您直接使用对象日期，则需要将日期中的年、月和日与数组的元素进行比较.这会导致性能不佳.认为函数isSelected"称为天有多少次，每次点击完成

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?

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

Here's what I tried

HTML code:

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

Typescript code:

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;
}

解决方案

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>

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

Imports:

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

TS Code:

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();
}

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

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

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'.

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"

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

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

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

You can see in stackblitz

(*) 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

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