日期选择器功能异常：添加待办时仅显示‘No Deadline’的解决求助

排查步骤及解决方案 #

1. 先确认后端传递的日期值是否正确

在EJS文件中临时添加调试代码，查看t.Due_Date的实际值：

<div class="d-block text-muted">
  <i class="fas fa-calendar-alt"></i>
  <% console.log('Due_Date值:', t.Due_Date) %> <!-- 新增调试代码 -->
  <%if(t.Due_Date==null){%>
    <%="No Deadline"%> <%}else{%> <%=t.Due_Date%> <%}%>
</div>

启动服务后查看控制台输出：

• 如果输出为null：说明用户选择的日期未被后端正确接收或存储，需检查：
  • 前端提交表单的日期输入框name属性是否与后端接收字段名一致（比如后端用req.body.Due_Date，则前端input需设置name="Due_Date"）
  • 后端处理提交请求的代码，确认是否正确获取并保存日期值，有无遗漏赋值或类型转换错误。
• 如果输出有实际日期值（如2024-05-20或ISO格式字符串）：说明EJS的判断逻辑存在问题，继续下一步。

2. 修正EJS的日期判断逻辑

若t.Due_Date是空字符串、undefined而非null，原有== null判断不会生效，需扩展判断条件：

<div class="d-block text-muted">
  <i class="fas fa-calendar-alt"></i>
  <% if(!t.Due_Date || t.Due_Date === null) { %>
    No Deadline
  <% } else { %>
    <%= t.Due_Date %>
  <% } %>
</div>

该逻辑可覆盖空字符串、undefined、null等无有效日期的场景。

3. 优化前端日期处理脚本

当前脚本会遍历所有.text-muted元素，包括显示"No Deadline"的元素，易误截取文本。可给日期元素添加专属类名，仅处理有日期的元素：

• 修改EJS：

<div class="d-block text-muted">
  <i class="fas fa-calendar-alt"></i>
  <% if(!t.Due_Date || t.Due_Date === null) { %>
    No Deadline
  <% } else { %>
    <span class="todo-deadline"><%= t.Due_Date %></span>
  <% } %>
</div>

• 修改script.js：

// 只处理包含日期的元素
for(let date of document.querySelectorAll('.todo-deadline')){
  date.innerText = date.innerText.toString().substring(0, 10);
  console.log(date.innerText);
}

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