JavaScript格式化Flask传递的Python数据集日期格式

当前Flask接口返回的日期是带时间的datetime类型，需要转换为自定义格式展示，目标格式示例为Monday, 6 June 2022，基础需求为去除时间部分仅保留日期。

原有代码参考 #

Python后端代码 #

import pandas as pd
from flask import Flask, render_template, jsonify, render_template_string, request, flash
import json
import datetime
from datetime import datetime

app = Flask(__name__)
app.secret_key = "test"

test_df = pd.DataFrame([
    ['Afghanistan', 'Report #1', 'Category #1', '2021-01-01', 'https://www.google.com', 'https://reliefweb.int/sites/default/files/styles/thumbnail/public/previews/c5/2d/c52de4ba-42d8-4383-8310-eb1a6966e803.png'],
    ['Bangladesh', 'Report #2', 'Category #1', '2021-01-01', 'https://www.google.com', 'https://reliefweb.int/sites/default/files/styles/thumbnail/public/previews/c5/2d/c52de4ba-42d8-4383-8310-eb1a6966e803.png'],
    ['Cambodia', 'Report #3', 'Category #2', '2021-01-01', 'https://www.google.com', 'https://reliefweb.int/sites/default/files/styles/thumbnail/public/previews/c5/2d/c52de4ba-42d8-4383-8310-eb1a6966e803.png']],
    columns=['Country', 'Title', 'Category', 'Date', 'Link', 'Image'])
test_df['Date'] = pd.to_datetime(test_df['Date'])
test_df = test_df.fillna("")
test_df = test_df.values.tolist()

@app.route("/hello")
def index():
    return render_template("index.html", test_df=test_df)


if __name__ == '__main__':
    app.run(debug=True, port=4000)

HTML/JavaScript前端代码 #

<body>

    <div class="main">
        <table class="table mydatatable" id="mydatatable">
            <thead>
                <tr>
                    <th> </th>
                    <th> </th>
                </tr>
            </thead>
            <tbody id="myTable">
            </tbody>
        </table>
    </div>


    <script>
        // Build Table
        function buildTable(data) {
            var table = document.getElementById('myTable')
            table.innerHTML = data.map(function (row) {
                let [Country, Title, Category, Date, Link, Image] = row;
                return `<tr>
                <td><br><br>
                <a href="${Link}" target='_blank'>
                    <img class="tableThumbnail" src=${Image}><br><br></td></a>
                <td>
                    <span class="tableTitle"><br><br><a href="${Link}" target='_blank'>${Title}</a><br></span>
                    <span class="tableCountry"><span>&nbsp;&nbsp;${Country}&nbsp;&nbsp;</span></span>&nbsp;&nbsp;
                    <span class="tableCategory">&nbsp;&nbsp;${Category}&nbsp;&nbsp;</span>
                    <span class="tableDate"><span><br>&nbsp;&nbsp;<i class="far fa-calendar"></i>&nbsp;&nbsp;${Date}</span></span>
                </td>
            </tr>`;
            }).join('');
        }

       const evidenceData = JSON.parse('{{ test_df|tojson }}');

        buildTable(evidenceData)

    </script>
</body>

代码中的标签嵌套结构是为了适配自定义CSS样式，实现预期视觉效果。

引入的第三方依赖 #

<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<!-- Icons -->
<script src="https://kit.fontawesome.com/f3135b3376.js" crossorigin="anonymous"></script>

实现方案 #

两种方案都可以实现需求，按需选择即可。

方案1：前端JS格式化（灵活度最高） #

Flask通过tojson传递到前端的日期是ISO格式字符串（类似2021-01-01T00:00:00.000Z），直接渲染会携带时间部分。注意不要用Date作为变量名，会和JS内置的Date构造函数冲突。

1. 先添加格式化工具函数：

/**
 * 日期转长格式，输出示例：Friday, 1 January 2021
 * @param {string} dateStr ISO格式日期字符串
 * @returns 格式化后的日期文本
 */
function formatLongDate(dateStr) {
  const date = new Date(dateStr);
  const formatOptions = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  };
  // 要中文显示把'en-US'改成'zh-CN'即可
  return date.toLocaleDateString('en-US', formatOptions);
}

// 仅需去除时间保留年-月-日的简化版
// function formatSimpleDate(dateStr) {
//   return new Date(dateStr).toISOString().split('T')[0];
// }

2. 修改buildTable函数的变量解构和渲染逻辑：

function buildTable(data) {
  const table = document.getElementById('myTable')
  table.innerHTML = data.map(function (row) {
      // 原Date变量改名，避免和内置API冲突
      const [Country, Title, Category, rawDate, Link, Image] = row;
      const displayDate = formatLongDate(rawDate);
      return `<tr>
      <td><br><br>
      <a href="${Link}" target='_blank'>
          <img class="tableThumbnail" src=${Image}><br><br></a></td>
      <td>
          <span class="tableTitle"><br><br><a href="${Link}" target='_blank'>${Title}</a><br></span>
          <span class="tableCountry"><span>&nbsp;&nbsp;${Country}&nbsp;&nbsp;</span></span>&nbsp;&nbsp;
          <span class="tableCategory">&nbsp;&nbsp;${Category}&nbsp;&nbsp;</span>
          <span class="tableDate"><span><br>&nbsp;&nbsp;<i class="far fa-calendar"></i>&nbsp;&nbsp;${displayDate}</span></span>
      </td>
  </tr>`;
  }).join('');
}

如果需要调整格式，修改formatOptions的配置即可：

• 星期/月份显示缩写：把对应字段值改为short
• 月份/日期显示数字：把对应字段值改为numeric
• 需要显示时分秒：添加hour: 'numeric', minute: 'numeric'配置

方案2：后端预处理格式化 #

如果不需要前端动态调整日期格式，直接在后端把日期转成目标格式字符串再传递，前端无需额外处理。
在后端pandas处理日期的代码后新增一行格式化逻辑即可：

test_df['Date'] = pd.to_datetime(test_df['Date'])
# 新增下面这行，格式化为 星期, 日 月 年 的长格式
test_df['Date'] = test_df['Date'].dt.strftime('%A, %-d %B %Y')
# 仅保留年-月-日用这个格式：'%Y-%m-%d'

处理后传递到前端的日期字段本身就是格式化完成的字符串，原有JS渲染逻辑不用修改就能直接用。

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