Angular 如何从角材质日期选择器中排除日期?

Angular 如何从角材质日期选择器中排除日期?,angular,typescript,datepicker,angular-material,Angular,Typescript,Datepicker,Angular Material,我使用的是角度材质,我有一个动态的日期数组,我希望从我的日期选择器中排除它。此外,我还试图排除周六。如何使用matDatepickerFilter返回多个日期? 请记住,我不能单独硬编码数组的每个项,因为数组是流动的,并且在一段时间后其值和长度都会发生变化 这是我的HTML: <mat-form-field style="text-align: center;" [ngClass]="{'hideTitle': submitted && f4.houseNumber.err

我使用的是角度材质,我有一个动态的日期数组,我希望从我的日期选择器中排除它。此外,我还试图排除周六。如何使用matDatepickerFilter返回多个日期? 请记住,我不能单独硬编码数组的每个项,因为数组是流动的,并且在一段时间后其值和长度都会发生变化

这是我的HTML:

<mat-form-field style="text-align: center;"
[ngClass]="{'hideTitle': submitted && f4.houseNumber.errors?.required && f4.aptNumber.errors?.required}">
    <input matInput 
      [matDatepicker]="picker" 
      placeholder="Desired Delivery Date" 
      [matDatepickerFilter]="myFilter"
      formControlName="deliveryDate" 
      style="font-family: 'Open Sans Condensed', sans-serif; color:white;">
    <mat-datepicker-toggle matSuffix [for]="picker" 
    style="color:gold;outline:none;"></mat-datepicker-toggle>
    <mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
</mat-form-field>
这是代码:

myFilter = (d: Date): boolean => {
 const time = d.getTime();
 const day = d.getDay();
for (let i = 0; i < this.allDupedDates.length; i++) {
  var date = this.allDupedDates[i].getTime();
  return time !== date
}
return day !== 6;
}
myFilter=(d:Date):布尔=>{
const time=d.getTime();
const day=d.getDay();
for(设i=0;i
您需要的筛选代码:

myFilter = (d: Date): boolean => {
  const day = d.getDay();
  const blockedDates = this.allDupedDates.map(d => d.valueOf());
  return (!blockedDates.includes(d.valueOf())) && day !== 6;
}
-使用valueOf()方法可以很容易地将日期对象彼此进行比较,该方法返回自历元起的毫秒数

需要注意的重要提示:

myFilter = (d: Date): boolean => {
  const day = d.getDay();
  const blockedDates = this.allDupedDates.map(d => d.valueOf());
  return (!blockedDates.includes(d.valueOf())) && day !== 6;
}
  • 确保在dupedDates中创建的日期对象是在执行筛选器的同一时区中创建的。这样可以确保时区相同,并且不会出现时区偏移问题例如:2019年4月30日00:00:00改为2019年4月29日23:30:00。
  • filter函数中的参数d:Date将始终提供一个表示客户机位置时区中午夜的日期。例如:如果从印度访问该应用程序:d将包含2019年4月29日00:00:00+05:30、2019年4月30日00:00:00+05:30,依此类推……

StackBlitz示例:

您是否确认
d
和所有
allDupDates
已将其小时/分钟/秒/毫秒设置为0?还有,所有的约会都是星期六吗?如果(day===6){return false;}在
for
之前,最好将
设置为0。小时/分钟/秒/毫秒设置为0。如果我返回false,则每个日期都将无效。时区表示小时不是零-例如,
(新日期('2019-05-23T00:00:00+02:00')。getTime()/(1000*60*60))%24
返回22。因此,最好比较时间部分是否与给定的“d”匹配,例如,显示
time%(1000*60*60*24)
date%(1000*60*60*24)
,以确保比较。返回false时,您是否切换了比较(请注意,我有
==6
,而不是原始的
!==6
)?非常感谢!现在是凌晨4点,我还在努力解决这个问题。。你帮了大忙!回答得好:)注意,尽管getTime()和valueOf()基本相同,但应该使用getTime()。请参阅,并注意“此方法通常由JavaScript在内部调用,而不是在代码中显式调用。”@JulianDave很乐意提供帮助!!如果此答案解决了您的问题,请单击答案旁边的复选标记将其标记为已接受。谢谢