员工管理Web应用升级：基于日期的员工列表显示规则开发咨询

没问题，我帮你把这两个筛选规则落地成可直接使用的代码，思路和实现都给你理清楚：

先明确核心规则 #

• 离职员工显示规则：只要当前系统日期晚于员工的离职日期，直接隐藏该员工，不参与任何筛选；反之则保留。
• 入职员工显示规则：未被隐藏的员工，只有当你选中的年月和他的入职年月完全匹配时，才会出现在列表里（比如2018年3月入职的员工，只有选2018年3月才显示，其他月份都不显示）

实现步骤&代码示例 #

1. 准备员工数据结构 #

不管是前端模拟还是后端接口返回，每个员工对象需要包含这三个字段：姓名、入职日期（YYYY-MM-DD格式）、离职日期（在职员工可以设为null）：

const employees = [
  { name: "张三", hireDate: "2018-03-19", leaveDate: null }, // 在职老员工
  { name: "李四", hireDate: "2024-05-10", leaveDate: "2024-06-30" }, // 即将离职的5月新员工
  { name: "王五", hireDate: "2023-12-01", leaveDate: "2024-04-15" }, // 已离职员工（当前日期过了离职日期）
  { name: "赵六", hireDate: "2024-05-05", leaveDate: null } // 5月新入职员工
];

2. 核心筛选函数 #

写一个专门的筛选函数，接收选中的年月（比如"2024-05"），返回符合条件的员工列表：

function filterEmployees(selectedYearMonth) {
  const currentDate = new Date();
  // 把选中的年月拆成年和月数字
  const [selectedYear, selectedMonth] = selectedYearMonth.split("-").map(Number);
  
  return employees.filter(employee => {
    // 先处理离职规则：已离职员工直接过滤
    if (employee.leaveDate) {
      const leaveDate = new Date(employee.leaveDate);
      // 只比较年月日，避免时分秒干扰（比如当前是凌晨，离职日期是前一天深夜，也算已离职）
      const currentDateOnly = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
      const leaveDateOnly = new Date(leaveDate.getFullYear(), leaveDate.getMonth(), leaveDate.getDate());
      if (currentDateOnly > leaveDateOnly) {
        return false;
      }
    }
    
    // 再处理入职匹配规则：选中年月必须和入职年月完全一致
    const hireDate = new Date(employee.hireDate);
    const hireYear = hireDate.getFullYear();
    const hireMonth = hireDate.getMonth() + 1; // 注意：JS的月份是0-11，要加1转成1-12
    
    return hireYear === selectedYear && hireMonth === selectedMonth;
  });
}

3. HTML页面交互实现 #

用原生HTML+JS实现日期选择器和列表渲染，直接复制就能用：

<div style="margin: 1rem;">
  <label for="monthPicker">选择年月：</label>
  <input type="month" id="monthPicker" value="2024-05">
</div>

<ul id="employeeList" style="list-style: none; padding: 0;"></ul>

<script>
// 员工数据（替换成你的后端接口数据即可）
const employees = [
  { name: "张三", hireDate: "2018-03-19", leaveDate: null },
  { name: "李四", hireDate: "2024-05-10", leaveDate: "2024-06-30" },
  { name: "王五", hireDate: "2023-12-01", leaveDate: "2024-04-15" },
  { name: "赵六", hireDate: "2024-05-05", leaveDate: null }
];

// 筛选函数
function filterEmployees(selectedYearMonth) {
  const currentDate = new Date();
  const [selectedYear, selectedMonth] = selectedYearMonth.split("-").map(Number);
  
  return employees.filter(employee => {
    if (employee.leaveDate) {
      const leaveDate = new Date(employee.leaveDate);
      const currentDateOnly = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
      const leaveDateOnly = new Date(leaveDate.getFullYear(), leaveDate.getMonth(), leaveDate.getDate());
      if (currentDateOnly > leaveDateOnly) {
        return false;
      }
    }
    
    const hireDate = new Date(employee.hireDate);
    const hireYear = hireDate.getFullYear();
    const hireMonth = hireDate.getMonth() + 1;
    
    return hireYear === selectedYear && hireMonth === selectedMonth;
  });
}

// 渲染员工列表
function renderEmployeeList(employees) {
  const listEl = document.getElementById("employeeList");
  listEl.innerHTML = "";
  
  if (employees.length === 0) {
    listEl.innerHTML = "<li style='padding: 0.5rem; border: 1px solid #eee;'>暂无符合条件的员工</li>";
    return;
  }
  
  employees.forEach(emp => {
    const li = document.createElement("li");
    li.style.padding = "0.5rem";
    li.style.border = "1px solid #eee";
    li.style.marginBottom = "0.5rem";
    
    let status = "在职";
    if (emp.leaveDate) {
      status = `离职日期：${emp.leaveDate}`;
    }
    
    li.textContent = `${emp.name} | 入职日期：${emp.hireDate} | ${status}`;
    listEl.appendChild(li);
  });
}

// 页面初始化时渲染列表
const monthPicker = document.getElementById("monthPicker");
renderEmployeeList(filterEmployees(monthPicker.value));

// 绑定日期选择变化事件
monthPicker.addEventListener("change", (e) => {
  const selectedMonth = e.target.value;
  const filteredEmployees = filterEmployees(selectedMonth);
  renderEmployeeList(filteredEmployees);
});
</script>

一些注意点 #

• JS的Date对象月份是从0开始的（0代表1月），所以处理时要记得加1转成我们常用的1-12格式
• 比较日期时只取年月日部分，避免时分秒的差异导致判断错误
• 如果你的应用是前后端分离的，也可以把筛选逻辑放在后端，前端只需要传选中的年月给接口，后端返回筛选后的员工列表，这样更适合数据量较大的情况

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