时间戳

首页 > 解决方案 > ag-grid：如果接近到期日期，则为单元格着色

reactjs - ag-grid：如果接近到期日期，则为单元格着色

问题描述

如果网格上的日期即将到期，即“调查到期 - 2020 年 1 月 1 日”，则尝试为单元格着色，并且我希望当今天的日期在供应商到期 5 个月内时单元格变为红色。请帮忙

        var today = new Date();
        var curr_date = today.getDate();
        var curr_month = today.getMonth() + 1;
        var curr_year = today.getFullYear();
        var todayMan = curr_month + '/' + curr_date + '/' curr_year

        class Bsall extends React.Component {
        constructor(props) {
        super(props) 
        this.state = {
        items: [],
        columnDefs: [

            {headerName: "Supplier Status", field: "supplier_status", sortable: true, filter: true},
            {headerName: "Survey Exp", field: "survey_exp", sortable: true, filter: true, cellStyle: 
            params => {
                if (params.value < todayMan + 5) {
                    return {'background-color': 'red'}}
                }},

标签： reactjsag-grid-react

解决方案

要达到预期的结果，请使用以下选项，即使用新日期并将月份与日期的 getMonth() 进行比较

  1. 获取两个日期的年份差异并通过乘以 12 转换为月份
    ((new Date(val).getFullYear() - new Date(todayMan).getFullYear()) * 12)

  2. 通过 getMonth() 方法从两个日期获取月份及其差异

    new Date(val).getMonth() - new Date(todayMan).getMonth()

  3. 将两者结合起来将给出日期之间的月数

  4. 检查是否少于 5 个月并应用样式

    if (months < 5) { return {'background-color': 'red'} }

工作代码示例供参考 - https://codepen.io/nagasai/pen/ZEEowMr?editors=1010

推荐阅读