Angular中日期列过滤器报错：TypeError: value.getTime is not a function

错误原因 #

出现ERROR TypeError: value.getTime is not a function at dateBefore - Angular错误，核心原因是：
PrimeNG的p-columnFilter（日期类型）要求绑定的字段必须是JavaScript Date对象，但你从接口获取的datavencimento（以及其他日期字段）大概率是字符串格式（如"2024-05-20"），而非Date实例，导致过滤器调用getTime()方法时触发类型错误。

你的代码 #

HTML代码 #

<th style="min-width: 10rem">
    <div class="flex justify-content-between align-items-center">
         Data vencimento
         <p-columnFilter type="date" field="datavencimento" display="menu"></p-columnFilter>
    </div>
</th>

组件代码 #

loadData() {
    this.CartaoParcelaService.listaCartaoParcela().subscribe((response) => {
        this.CartaoParcelas = response
        this.loading = false
    });
}

configurarFormulario(CartaoParcela: CartaoParcela = { ativo: true }) {
    this.form = this.formBuilder.group({
        id: [CartaoParcela.id, []],
        numeroonder: [{ value: CartaoParcela.numeroonder, disabled: true }],
        cartao: [{ value: CartaoParcela.cartao, disabled: true }],
        parcela: [{ value: CartaoParcela.parcela, disabled: true }],
        datacompra: [{ value: CartaoParcela.datacompra, disabled: true }],
        datapagamento: [CartaoParcela.datapagamento, []],
        datavencimento: [CartaoParcela.datavencimento],
        valorpagamento: [CartaoParcela.valorpagamento, []],
        ativo: [{ value: CartaoParcela.ativo, disabled: true }],
    });
}

解决方案 #

1. 转换接口返回的日期字段为Date对象 #

修改loadData方法，遍历接口返回的数据，将所有日期字段转换为Date实例：

loadData() {
    this.CartaoParcelaService.listaCartaoParcela().subscribe((response) => {
        this.CartaoParcelas = response.map(item => ({
            ...item,
            // 转换到期日期
            datavencimento: item.datavencimento ? new Date(item.datavencimento) : null,
            // 同时转换其他日期字段，避免后续操作出错
            datacompra: item.datacompra ? new Date(item.datacompra) : null,
            datapagamento: item.datapagamento ? new Date(item.datapagamento) : null
        }));
        this.loading = false;
    });
}

注意：如果接口返回的日期格式不是标准的ISO格式（如YYYY-MM-DD），需要先手动调整格式再转换，比如处理DD/MM/YYYY格式的日期。

2. 确保表单中的日期值为Date类型 #

在configurarFormulario方法中，同样对日期字段做转换，保证表单控件绑定的是Date对象：

configurarFormulario(CartaoParcela: CartaoParcela = { ativo: true }) {
    this.form = this.formBuilder.group({
        id: [CartaoParcela.id, []],
        numeroonder: [{ value: CartaoParcela.numeroonder, disabled: true }],
        cartao: [{ value: CartaoParcela.cartao, disabled: true }],
        parcela: [{ value: CartaoParcela.parcela, disabled: true }],
        datacompra: [{ 
            value: CartaoParcela.datacompra ? new Date(CartaoParcela.datacompra) : null, 
            disabled: true 
        }],
        datapagamento: [CartaoParcela.datapagamento ? new Date(CartaoParcela.datapagamento) : null, []],
        datavencimento: [CartaoParcela.datavencimento ? new Date(CartaoParcela.datavencimento) : null],
        valorpagamento: [CartaoParcela.valorpagamento, []],
        ativo: [{ value: CartaoParcela.ativo, disabled: true }],
    });
}

3. 处理非标准日期格式（可选） #

如果接口返回的日期格式是DD/MM/YYYY这类非标准格式，需要自定义转换函数：

// 自定义日期转换函数
function parseCustomDate(dateStr: string): Date | null {
    if (!dateStr) return null;
    // 分割日、月、年
    const [day, month, year] = dateStr.split('/');
    // 注意：月份是从0开始的，所以要减1
    return new Date(Number(year), Number(month) - 1, Number(day));
}

// 在loadData中使用
datavencimento: item.datavencimento ? parseCustomDate(item.datavencimento) : null

内容的提问来源于stack exchange，提问作者jt_sobrinho